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

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

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

Пример:

Вариант использования 1 (работает):http://jsfiddle.net/Jp5AQ/2/Вариант использования 2 (работает):http://jsfiddle.net/Jp5AQ/3/

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

Вариант использования 3 (не работает):http://jsfiddle.net/Jp5AQ/4/
 Thomas Guillory03 апр. 2012 г., 16:12
@gryzzly Примеры говорят сами за себя! Если они смотрели на примеры, это было очевидно.
 mikevoermans03 апр. 2012 г., 15:42
Вы имеете в виду как высота: 100% и ширина: 100%? У вас есть желаемое измерение, которого вы хотите достичь? в противном случае вы также можете растянуть изображение и заставить его достичь этих размеров.
 Thomas Guillory03 апр. 2012 г., 15:55
@mikevoermans Посмотрите на два моих первых примера: я хочу растянуть изображение, пока одно из измерений не станет 100%, а другое - <= 100%
 Thomas Guillory03 апр. 2012 г., 15:59
@jacktheripper Сохранение пропорций конечно ...
 jacktheripper03 апр. 2012 г., 15:43

Ответы на вопрос(13)

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

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;
}

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

 Misha Reyzlin03 апр. 2012 г., 16:07
Также постарайтесь быть более вежливым. Никто не поможет вам, если вы так говорите.
 ericosg03 апр. 2012 г., 16:09
@Artimuz Приношу свои извинения, если я вас не направил, но мне показалось неясным, что вы хотите сохранить соотношение сторон, поэтому я специально прокомментировал это. Кроме того, вы заметите, что я вставил фрагмент вашего кода из примеров. Я верю, что держу высоту: авто; сделает это за вас, если вы укажете ширину.
 Khan03 апр. 2012 г., 15:54
Постарайтесь быть немного более понятным с вашими ожиданиями, прежде чем отвергать чей-либо ответ. Особенно, когда они ответили на ваш вопрос до того, как вы уточнили его с помощью правок.

Сначала немного CSS:

div.image-wrapper {
    height: 230px; /* Suggestive number; pick your own height as desired */
    position: relative;
    overflow: hidden; /* This will do the magic */
    width: 300px; /* Pick an appropriate width as desired, unless you already use a grid, in that case use 100% */
}
img {
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: auto;
}

HTML:

<div class="image-wrapper">
  <img src="yourSource.jpg">
</div>

Это должно сработать!

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

Вот фрагмент кода, который работает в 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>

.boundingbox {
    width: 400px;
    height: 500px;
    border: 2px solid #F63;
}
img{
    width:400px;
    max-height: 500px;
    height:auto;
}

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

С стилями, установленными, как показано выше в css, теперь следующий HTML-div будет показывать, что изображение всегда соответствует ширине, и будет регулировать высокое соотношение сторон к ширине. Таким образом, изображение будетмасштаб, чтобы соответствовать ограничивающей рамке как спросил в вопросе.

<div class="boundingbox"><img src="image.jpg"/></div>
 XwipeoutX15 июн. 2015 г., 03:33
Этот ответ работает только тогда, когда поле выше, чем оно широко.

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

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

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

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

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

содержать. Поддержка это все, кроме IE:http://caniuse.com/#feat=object-fit

 fgblomqvist27 июл. 2017 г., 15:40
Это должен быть один из самых популярных ответов 2017 года и далее ... Согласно приведенной выше ссылке на caniuse, 90% всех пользователей во всем мире сейчас используют браузер, который поддерживает это
 BairDev09 июн. 2017 г., 09:47
Я бы сказал, что проблема не в IE, а в Edge. По словам Каниусеobject-fit находится в стадии разработки для этого.
 Zhang09 дек. 2016 г., 03:56
На момент написания этой статьи (16.09.2016, 10:56 утра) IE занимал лишь около 16% рынка и продолжает сокращаться, поэтому для меня это лучший ответ: D
 gabrielmaldi27 сент. 2017 г., 22:28
Я только что опубликовал ответ, который работает с и безobject-fit: stackoverflow.com/a/46456673/474031
 Glenn Maynard18 дек. 2016 г., 23:01
Не редактируйте чужие ответы, чтобы исправить ошибки, кроме опечаток или неработающих ссылок. Я бы не сказал что-то по-детски вроде «Есть полифил для дерьмовых браузеров» в SO-ответе, и я не ценю, что мой ответ редактировали, чтобы он выглядел так, как будто я это сказал. если вы хотите использовать свои слова, поместите их в свой ответ.
Решение Вопроса

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

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

.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>

 duncanwilcox02 янв. 2014 г., 12:43
Я бы сказал, что это правильный ответ на заданный вопрос, а именно, что такое CSS для тега img. Это важно, потому что семантически тег img является содержимым, а изображение в качестве фона для div - нет. Хотя некоторые обстоятельства делают это непрактичным (если вы не знаете соотношение изображения и контейнера), для других это просто правильно. Благодарю.
 Thomas Guillory04 апр. 2012 г., 19:57
На самом деле есть решение: установка CSS3 background-size для содержания. Смотри мой ответ.
 Stephan Muller03 янв. 2014 г., 14:34
Это справедливо, я не смотрел на это так.
 Stephan Muller17 сент. 2013 г., 16:01
Ты совершенно прав. Несмотря на то, что прошло полтора года, я отредактировал свой пост.

(хотя максимальные размеры ограничивающего прямоугольника должны быть известны):

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>

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;*/
}

Решение состоит в том, чтобы поместить изображение как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%;
}
 Andrey Mikhaylov - lolmaus28 авг. 2013 г., 21:09
Следует отметить, что вы можете вставлять URL-адреса изображений в HTML:<div class=image style="background-image: url('/images/foo.jpg');"></div>, Все остальные стили должны применяться с CSS.
 Stephan Muller05 апр. 2012 г., 12:49
Хороший, хотя мой ответ не является неправильным (вы спрашивали об IMG конкретно), это отличное решение, и я должен был подумать об этом. Единственная проблема заключается в том, что IE 8 все еще так широко используется, что я не хотел бы на это полагаться, но, тем не менее, это хороший улов.
 animuson♦06 сент. 2013 г., 02:16
Я бы сказал, что это ужасный подход. Изменяя его на background-image, вы удаляете семантическое значение изображения в HTML.
 Arx Poetica06 дек. 2012 г., 17:55
Установите его на «обложку», если вам не нужен почтовый ящик: background-size: Содержит;
 Christian Wattengård07 янв. 2014 г., 12:46
@animuson: Это все еще помогло мне, поскольку я использую HTML / CSS для печатных отчетов, и не смог дать толкования по поводу семантики :)

чтобы уместить все окно. Импровизация в приведенный выше правильный код должен добавить$( 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% если вы хотите растянуть изображение с помощью div. , чтобы уместить все окно.

 Colt McCormack20 янв. 2015 г., 22:11
ОП специально попросил подход только для css.

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

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

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

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

 ndm1302 дек. 2014 г., 01:25
Я люблю это решение. Мало того, что он действительно отвечает на вопрос (я знаю, что за мысль), он прекрасно работает во всех современных браузерах, не прибегая к Javascript!
 Codemonkey23 февр. 2016 г., 23:38
Brilliant. Единственное, что меня беспокоит, - это возможная потеря качества изображения в плохо закодированном браузере, но теоретически это должно работать нормально!
 XwipeoutX15 июн. 2015 г., 03:36
Хороший ответ! @Yashua Вы должны добавитьtransform-origin: top left остановить обрезку. /Зомби
 notacouch25 нояб. 2015 г., 17:22
Это явно гениально.
 cyberwombat11 апр. 2015 г., 20:45
Я хотел бы увидеть скрипку этого. В моем тесте размещения img в контейнере 400x400 img просто обрезается в углу

чтобы центрировать изображение внутри коробки. Он сохраняет пропорции и масштабирует изображение таким образом, чтобы оно полностью находилось внутри рамки. Если изображение меньше прямоугольника, оно отображается в центре. Код ниже использует ширину 40px и высоту 40px. (Не совсем уверен, насколько хорошо это работает, потому что я удалил его из другого более сложного кода и немного упростил его)

CSS:

.SmallThumbnailContainer
{
    display: inline-block; position: relative;
    float: left;    
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
    margin: 0px; padding: 0px;
}
.SmallThumbnailContainer { width: 40px; margin: 0px 10px 0px 0px; } 
.SmallThumbnailContainer tr { height: 40px; text-align: center; }
.SmallThumbnailContainer tr td { vertical-align: middle; position: relative; width: 40px;  }
.SmallThumbnailContainer tr td img { overflow: hidden; max-height: 40px; max-width: 40px; vertical-align: middle; margin: -1px -1px 1px -1px; }

HTML:

<table class="SmallThumbnailContainer" cellpadding="0" cellspacing="0">
    <tr><td>
        <img src="thumbnail.jpg" alt="alternative text"/>
    </td></tr>
    </table>

Ваш ответ на вопрос