Как изменить размер изображения, сохраняя соотношение сторон в CSS?

У меня большое изображение. Я хочу отображать его на своей собственной веб-странице, и, делая это без CSS, он заполняет всю страницу и слишком велик, чтобы отображать сразу (появляются полосы прокрутки). Я хочу масштабировать его, чтобы он соответствовал высоте экрана пользователя (а не ширины). Я нашел решения, но они растягивают изображение, чтобы он соответствовал всему экрану - я не хочу этого, поскольку он разрушает соотношение сторон.

В принципе, я хочу изменить размер изображения, сохраняя соотношение сторон. Как это сделать?

Ответы

Ответ 1

Просто установите width на auto:

img {
   width: auto;
   max-height: 100%;
}

Здесь скрипка: http://jsfiddle.net/6Y5Zp/

Ответ 2

вот образец один

div{
   width: 200px;
   height:200px;
   border:solid
 }

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    }

<div>
  <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
</div>

Ответ 3

Вы можете использовать div с фоновым изображением и задать размер фона: содержать:

div.image{
    background-image: url("your/url/here");
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center;
}

Теперь вы можете просто установить свой размер div на все, что захотите, и не только изображение сохранит его соотношение сторон, оно также будет централизовано как по вертикали, так и по горизонтали. Просто не забудьте установить размеры в css, так как divs не имеют атрибута width/height самого тега.

Свойство background-size равно ie >= 9, хотя.

Ответ 4

Я думаю, вам нужно вставить класс внутри изображения, которое вы хотите показать следующим образом

< image  class="image" >

и это класс

.image 


 text align: center
 max width:pixels you want
 max height pixels you want

но убедитесь, что оба они одинаковы этот способ не выйдет из экрана по высоте и ширине.

или вы можете играть с шириной и высотой

Ответ 5

У меня была похожая проблема. Я решил это только с помощью CSS.

В основном, Object-fit: cover помогает вам решить задачу поддержания соотношения сторон при размещении изображения внутри div.

Но проблема заключалась в Object-fit: cover не работала в IE, она занимала 100% ширины и 100% высоты, а соотношение сторон было искажено. Другими словами, эффекта увеличения масштаба изображения не было, что я видел в Chrome.

Подход, который я выбрал, состоял в том, чтобы расположить изображение внутри контейнера с абсолютным, а затем поместить его прямо в центр, используя комбинацию

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Как только это в центре, я даю изображение,

// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;

// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;

Это заставляет изображение получить эффект Object-fit: cover.

Вот демонстрация вышеуказанной логики.

https://jsfiddle.net/furqan_694/s3xLe1gp/

Эта логика работает во всех браузерах.