Масштабирование изображения в соответствии с ограничительной рамкой

благодаря 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%;
}

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

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

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

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

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

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

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

это, однако, не блокирует пропорции.

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

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

---

Если требуется использование контейнера, то максимальная ширина и максимальная высота могут быть установлены на 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>

вы можете сделать это с помощью чистого 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>

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

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

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>

этот пример, чтобы растянуть изображение пропорционально размеру всего окна. Импровизация к приведенному выше правильному коду-добавить $( 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();
});

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

вот CSS

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

вы можете заменить 100vh by 100% если вы хотите растянуть изображение в div. В этом примере растянуть изображение пропорционально, чтобы соответствовать всему окну.

самый чистый и простой способ сделать это:

сначала некоторые 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>

Это должно сделать трюк!

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

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

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

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

надеюсь, что это помогает!

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

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

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

<div class="boundingbox"><img src="image.jpg"/></div>