Как растянуть изображение, чтобы оно соответствовало экрану и сохранить соотношение сторон с помощью CSS?

Question

Как растянуть изображение, чтобы оно соответствовало экрану и сохранить соотношение сторон с помощью CSS?

0

См. Мой пример здесь - http://jsbin.com/kutobedo/1/edit

Когда вы сокращаете окно браузера, изображение правильно изменяется и поддерживает его соотношение сторон. Однако я хочу, чтобы изображение всегда растягивалось, чтобы заполнить экран, но в этом случае он никогда не растягивается за пределы собственного разрешения.

Если я установил ширину: 100% вместо максимальной ширины. Он будет растягивать изображение в соответствии с шириной, но если вы уменьшите окно по вертикали, оно начнет искажать изображение.

Если я устанавливаю высоту: 100% вместо максимальной высоты, я получаю переполнения/полосы прокрутки.

Так что я немного застрял! Обратите внимание, что изображения будут иметь разные пропорции и разрешения.

Я предполагаю, что в долгосрочной перспективе это может быть не очень хорошая идея, так как изображение 1024x768, взорванное на экране 4k, может показаться немного неприятным. Тем не менее, все же хотелось бы решения.

Fred 28 апр. 2014, в 17:08

Источник

0

Я задал этот вопрос (по существу) здесь: stackoverflow.com/questions/10142491/…
ediblecode 28 апр. 2014, в 14:35
0

Этот? jsbin.com/kutobedo/4/edit
Billy Moat 28 апр. 2014, в 14:39
0

Привет Билли, в вашем решении, если вы начнете изменять размер окна по вертикали, оно будет переполнено вместо изменения размера изображения.
Fred 28 апр. 2014, в 15:04

Показать ещё 1 комментарий

Теги:

html

css

css3

image

4 ответа

Ещё вопросы

Я задал этот вопрос (по существу) здесь: stackoverflow.com/questions/10142491/…
Привет Билли, в вашем решении, если вы начнете изменять размер окна по вертикали, оно будет переполнено вместо изменения размера изображения.

user3581850 · Answer 1 · 2014-04-28T13-28-00.000Z

При использовании свойства "обложка" изображение масштабируется на весь фон до тех пор, пока весь фон не будет покрыт им. Подробнее на http://en.aufdemdach.org/css-en/css-center-background-images/

Пример:

body{
   background: url("http://lorempixel.com/g/1000/1000/") no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

demonofthemist · Answer 2 · 2014-04-28T11-39-00.000Z

Установите изображение в качестве фона div & use background-size:cover; , Это растянет его, чтобы заполнить экран без потери соотношения сторон, независимо от того, каковы размеры изображения.

Изображение должно быть добавлено динамически, так что вы думаете, я должен установить изображение в качестве фона в качестве встроенного стиля?

Mohammed Furqan Rahamath M · Answer 3 · 2019-06-13T07-17-00.000Z

У вас есть два варианта для достижения этого только с помощью CSS:

Используйте Object-fit: cover. Единственная проблема с этим состоит в том, что это не будет работать во всех браузерах
Если вы хотите кросс-браузерную поддержку, вы можете следовать примитивному подходу CSS:

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

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/

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

Mohammed Furqan Rahamath M · Answer 4 · 2019-06-12T13-32-00.000Z

У меня была похожая проблема. Я решил это только с помощью 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/

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