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

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

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

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

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

Пример:

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

Ответы [ 13 ]

0 голосов
/ 27 мая 2016

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

Сначала немного 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>

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

0 голосов
/ 23 марта 2015 
.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>
0 голосов
/ 23 августа 2013

Я использовал таблицу для центрирования изображения внутри рамки. Он сохраняет пропорции и масштабирует изображение таким образом, чтобы оно полностью находилось внутри рамки. Если изображение меньше прямоугольника, оно отображается в центре. Код ниже использует ширину 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>
Страница:
...