Есть ли решение для масштабирования изображения в ограничительной рамке (поддерживающее соотношение сторон)? Это работает, если изображение больше контейнера:
img {
max-width: 100%;
max-height: 100%;
}
Пример:
Но я хочу увеличить изображение до тех пор, пока размер не станет 100% от контейнера.
Примечание. Несмотря на то, что это принятый ответ, ответ ниже является более точным и в настоящее время поддерживается во всех браузерах, если у вас есть возможность использовать фоновое изображение.
Нет, не существует 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>Благодаря 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>.
Сегодня просто скажем, что объект-подгонка: содержать. Поддержка - это все, кроме 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>Я использовал стол для центрирования изображения внутри коробки. Он сохраняет соотношение сторон и масштабирует изображение таким образом, что он полностью находится внутри коробки. Если изображение меньше, чем поле, оно отображается как оно находится в центре. Ниже код использует ширину 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();
});
Существуют два условия. Первый проверяет, меньше ли высота изображения, чем div, и применяет класс .fillheight, а следующий проверяет ширину и применяет класс .fillwidth.
В обоих случаях другой класс удаляется с помощью .removeClass()
Вот CSS
.fillwidth {
width: 100%;
max-width: none;
height: auto;
}
.fillheight {
height: 100vh;
max-width: none;
width: auto;
}
Вы можете заменить 100vh на 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;
}
Я редактирую свой ответ для дальнейшего объяснения своего солотона, поскольку у меня есть голосующий голос.
С стилями, указанными выше в css, теперь следующий html div покажет, что изображение всегда соответствует ширине и отрегулирует отношение высоты к ширине. Таким образом, изображение будет масштабироваться в соответствии с ограничивающей рамкой, заданной в вопросе.
<div class="boundingbox"><img src="image.jpg"/></div>