Масштабируйте изображение, чтобы оно соответствовало ограничивающей рамке - PullRequest
Новая
       52

Масштабируйте изображение, чтобы оно соответствовало ограничивающей рамке

104 голосов
/ 03 апреля 2012

Существует ли решение css-only для масштабирования изображения в ограничительной рамке (с сохранением соотношения сторон)? Это работает, если изображение больше контейнера: 

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

Пример:

Но я хочу увеличить изображение, пока размер не будет равен 100% контейнера.

Ответы [ 13 ]

160 голосов
/ 04 апреля 2012

Благодаря CSS3 есть решение!

Решение состоит в том, чтобы поместить изображение как background-image, а затем установить background-size на contain.

HTML

<div class='bounding-box'>
</div>

CSS 

.bounding-box {
  background-image: url(...);
  background-repeat: no-repeat;
  background-size: contain;
}

Проверьте здесь: http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain

Полная совместимость с последними браузерами: http://caniuse.com/background-img-opts

Чтобы выровнять div по центру, вы можете использовать этот вариант: 

.bounding-box {
  background-image: url(...);
  background-size: contain;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
}
87 голосов
/ 03 апреля 2012

Примечание. Даже если этот ответ принят, ответ ниже является более точным и в настоящее время поддерживается во всех браузерах, если у вас есть возможность использовать фоновое изображение.

Нет, в CSS нет единственного способа сделать это в обоих направлениях. Вы можете добавить 

.fillwidth {
    min-width: 100%;
    height: auto;
}

Чтобы элемент всегда имел его ширину 100% и автоматически масштабировал высоту до соотношения сторон, или обратное: 

.fillheight {
    min-height: 100%; 
    width: auto;
}

чтобы всегда масштабировать до максимальной высоты и относительной ширины. Чтобы сделать то и другое, вам нужно определить, является ли соотношение сторон выше или ниже, чем у контейнера, а CSS не может этого сделать.

Причина в том, что CSS не знает, как выглядит страница. Он устанавливает правила заранее, но только после этого элементы визуализируются, и вы точно знаете, с какими размерами и коэффициентами вы имеете дело. Единственный способ обнаружить это с помощью JavaScript.

Хотя вы не ищете JS-решение, я все равно добавлю его, если кому-то оно может понадобиться. Самый простой способ справиться с этим с помощью JavaScript - добавить класс, основанный на разнице в соотношении. Если отношение ширины к высоте поля больше, чем у изображения, добавьте класс «fillwidth», иначе добавьте класс «fillheight». 

$('div').each(function() {
  var fillClass = ($(this).height() > $(this).width()) 
    ? 'fillheight'
    : 'fillwidth';
  $(this).find('img').addClass(fillClass);
});
.fillwidth { 
  width: 100%; 
  height: auto; 
}
.fillheight { 
  height: 100%; 
  width: auto; 
}

div {
  border: 1px solid black;
  overflow: hidden;
}

.tower {
  width: 100px;
  height: 200px;
}

.trailer {
  width: 200px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tower">
  <img src="http://placekitten.com/150/150" />
</div>
<div class="trailer">
  <img src="http://placekitten.com/150/150" />
</div>
34 голосов
/ 30 октября 2014

Вот хакерское решение, которое я обнаружил: 

#image {
    max-width: 10%;
    max-height: 10%;
    transform: scale(10);
}

Это увеличит изображение в десять раз, но ограничит его до 10% от его окончательного размера - тем самым привязав его к контейнеру.

В отличие от решения background-image, оно также будет работать с <video> элементами.

19 голосов
/ 12 апреля 2015

Сегодня просто скажите, что объект подходит: содержать. Поддержка это все, кроме IE: http://caniuse.com/#feat=object-fit

2 голосов
/ 22 апреля 2018

HTML: 

    <div class="container">
      <img class="flowerImg" src="flower.jpg">
    </div>

css: 

.container{
  width: 100px;
  height: 100px;
}


.flowerImg{
  width: 100px;
  height: 100px;
  object-fit: cover;
  /*object-fit: contain;
  object-fit: scale-down;
  object-position: -10% 0;
  object-fit: none;
  object-fit: fill;*/
}
2 голосов
/ 28 сентября 2016

Другое решение без фонового изображения и без необходимости контейнера (хотя максимальные размеры ограничительной рамки должны быть известны): 

img{
  max-height: 100px;
  max-width: 100px;
  width: auto;    /* These two are added only for clarity, */
  height: auto;   /* as the default is auto anyway */
}

<ч /> Если требуется использование контейнера, то max-width и max-height могут быть установлены на 100%: 

img {
    max-height: 100%;
    max-width: 100%;
    width: auto; /* These two are added only for clarity, */
    height: auto; /* as the default is auto anyway */
}

div.container {
    width: 100px;
    height: 100px;
}

Для этого у вас будет что-то вроде: 

<table>
    <tr>
        <td>Lorem</td>
        <td>Ipsum<br />dolor</td>
        <td>
            <div class="container"><img src="image5.png" /></div>
        </td>
    </tr>
</table>
1 голос
/ 27 сентября 2017

Вы можете сделать это с помощью чистого CSS, как для изображений с вертикальной, так и горизонтальной длиной при одной ручке.

Вот фрагмент кода, который работает в Chrome, Firefox и Safari (оба с использованием object-fit: scale-downи без него): 

figure {
  margin: 0;
}

.container {
  display: table-cell;
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border: 1px solid #aaa;
}

.container_image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container2_image2 {
  width: 80px;
  height: 80px;
  object-fit: scale-down;
  border: 1px solid #aaa;
}
Without `object-fit: scale-down`:

<br>
<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure class="container">
  <img class="container_image" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>

<br> Using `object-fit: scale-down`:

<br>
<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/EQgexUd.jpg">
</figure>

<br>

<figure>
  <img class="container2_image2" src="https://i.imgur.com/ptO8pGi.jpg">
</figure>
1 голос
/ 12 декабря 2014

Этот пример, чтобы растянуть изображение пропорционально, чтобы уместить все окно. Импровизация к вышеуказанному правильному коду - добавить $( window ).resize(function(){});

function stretchImg(){
    $('div').each(function() {
      ($(this).height() > $(this).find('img').height()) 
        ? $(this).find('img').removeClass('fillwidth').addClass('fillheight')
        : '';
      ($(this).width() > $(this).find('img').width()) 
        ? $(this).find('img').removeClass('fillheight').addClass('fillwidth')
        : '';
    });
}
stretchImg();

$( window ).resize(function() {
    strechImg();
});

Есть два условия. Первый проверяет, меньше ли высота изображения, чем div, и применяет класс .fillheight, а следующий проверяет ширину и применяет класс .fillwidth. В обоих случаях другой класс удаляется с помощью .removeClass()

Вот CSS 

.fillwidth { 
   width: 100%;
   max-width: none;
   height: auto; 
}
.fillheight { 
   height: 100vh;
   max-width: none;
   width: auto; 
}

Вы можете заменить 100vh на 100%, если хотите растянуть изображение с помощью деления. Этот пример растягивает изображение пропорционально, чтобы уместить все окно.

1 голос
/ 03 апреля 2012

Вы хотите масштабировать вверх, а не вниз? 

div {
    border: solid 1px green;
    width: 60px;
    height: 70px;
}

div img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    min-width: 500px;
    outline: solid 1px red;
}

Это, однако, не блокирует соотношение сторон.

0 голосов
/ 07 февраля 2017

Это помогло мне: 

.img-class {
  width: <img width>;
  height: <img height>;
  content: url('/path/to/img.png');
}

Затем на элементе (вы можете использовать javascript или медиа-запросы, чтобы добавить отзывчивость): 

<div class='img-class' style='transform: scale(X);'></div>

Надеюсь, это поможет!

Страница:
...