Как я могу автоматически изменить размер изображения, чтобы соответствовать контейнеру div
Как автоматически изменить размер большого изображения, чтобы оно помещалось в контейнер div меньшей ширины при сохранении соотношения ширины и высоты?
Пример: stackru.com - когда изображение вставляется в панель редактора, а изображение слишком велико для размещения на странице, размер изображения автоматически изменяется.
37 ответов
Не применяйте явную ширину или высоту к тегу изображения. Вместо этого дайте это:
max-width:100%;
max-height:100%;
Также, height: auto; если вы хотите указать только ширину.
Пример: http://jsfiddle.net/xwrvxser/1/
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}Portrait Div
<div class="portrait">
<img src="https://stackru.com/images/8569d7031abbd0285531dd145f363dac51a6e9be.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="https://stackru.com/images/8569d7031abbd0285531dd145f363dac51a6e9be.jpg">
</div>
Square Div
<div class="square">
<img src="https://stackru.com/images/8569d7031abbd0285531dd145f363dac51a6e9be.jpg">
</div>https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
Оказывается, есть еще один способ сделать это.
<img style='height: 100%; width: 100%; object-fit: contain'/>
сделаю работу. Это CSS3 материал.
Скрипка: http://jsfiddle.net/mbHB4/7364/
В настоящее время нет способа сделать это правильно детерминированным способом с помощью изображений фиксированного размера, таких как JPEG или PNG.
Чтобы пропорционально изменить размер изображения, вы должны установить высоту или ширину на "100%", но не оба одновременно. Если вы установите оба на "100%", ваше изображение будет растянуто.
Выбор высоты или ширины зависит от вашего изображения и размеров контейнера:
- Если ваше изображение и контейнер имеют "портретную форму" или обе "ландшафтной формы" (выше, чем они широкие, или шире, чем они высокие, соответственно), то не имеет значения, какая из высоты или ширины равна "%100",
- Если ваше изображение портретное, а контейнер - альбомный, вы должны установить
height="100%"на изображении. - Если ваше изображение имеет альбомную ориентацию, а контейнер - книжный, вы должны установить
width="100%"на изображении.
Если ваше изображение представляет собой SVG, который представляет собой векторный формат изображения переменного размера, вы можете сделать так, чтобы расширение соответствовало контейнеру автоматически.
Вам просто нужно убедиться, что файл SVG не имеет ни одного из этих свойств, установленных в <svg> тег:
height
width
viewbox
Большинство программ векторного рисования устанавливают эти свойства при экспорте файла SVG, поэтому вам придется вручную редактировать файл каждый раз, когда вы экспортируете, или писать скрипт для этого.
Вот решение, которое выровняет ваш img по вертикали и горизонтали в пределах div без какого-либо растяжения, даже если предоставленное изображение слишком маленькое или слишком большое, чтобы поместиться в div. HTML:
<div id="myDiv">
<img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>
CSS:
#myDiv
{
height:104px;
width:140px;
}
#myDiv img
{
max-width:100%;
max-height:100%;
margin:auto;
display:block;
}
JQuery:
var logoHeight = $('#myDiv img').height();
if (logoHeight < 104) {
var margintop = (104 - logoHeight) / 2;
$('#myDiv img').css('margin-top', margintop);
}
Я надеюсь, что это поможет вам, ребята
Прекрасный хак.
У вас есть два способа сделать изображение отзывчивым.
- Когда изображение является фоновым изображением.
#container{
width: 300px;
height: 300px;
background-image: url(http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
<div id="container"><div>
Запустите это здесь
Но нужно использовать
img пометить, чтобы поместить изображения, как это лучше, чем background-image с точки зрения SEO, как вы можете написать ключевое слово в alt из img тег. Так что вот вы можете сделать изображение отзывчивым.
- Когда изображение в
imgтег.
#container{
max-width: 400px;
overflow: hidden;
}
img{
width: 100%;
object-fit: contain;
}
<div id="container">
<img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>
Запустите это здесь
Упрости!
Дайте контейнеру фиксированный height а затем для img тег внутри него установлен width а также max-height,
<div style="height: 250px">
<img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>
Разница в том, что вы устанавливаете width быть на 100% не max-width,
Вы можете установить изображение в качестве фона для div, а затем использовать свойство css background-size
background-size: cover;
и он будет "масштабировать фоновое изображение как можно большим, чтобы фоновая область была полностью покрыта фоновым изображением. Некоторые части фонового изображения могут не отображаться в пределах области позиционирования фона" -w3schools.com
Проверьте мое решение: http://codepen.io/petethepig/pen/dvFsA
Он написан на чистом CSS, без кода JS. Он может обрабатывать изображения любого размера и любой ориентации.
Учитывая такой HTML:
<div class="image">
<div class="trick"></div>
<img src="http://placekitten.com/415/200"/>
</div>
Код CSS будет:
.image {
font-size: 0;
text-align: center;
width: 200px; /* Container's dimensions */
height: 150px;
}
img {
display: inline-block;
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
.trick {
display: inline-block;
vertical-align: middle;
height: 150px;
}
Есть несколько способов подогнать изображение под
<div>.
img {
object-fit: cover;
}
Свойство CSS object-fit используется, чтобы указать, как
<img> или же
<video> должен быть изменен, чтобы соответствовать его контейнеру.
Это свойство указывает содержимому заполнить контейнер различными способами; такие как «сохранить это соотношение сторон» или «растянуть и занять как можно больше места».
- fill - это значение по умолчанию. Размер изображения изменяется, чтобы заполнить заданное измерение. При необходимости изображение будет растянуто или сжато по размеру
- содержать - изображение сохраняет свое соотношение сторон, но его размер изменяется в соответствии с заданным размером.
- обложка - изображение сохраняет свое соотношение сторон и заполняет заданный размер. Изображение будет обрезано по размеру
- none - размер изображения не изменяется
- scale-down - изображение уменьшено до наименьшей версии, не содержит или не содержит
Вы можете найти больше рабочих образцов здесь.
У меня есть гораздо лучшее решение без необходимости каких-либо JS. Он полностью отзывчив, и я им часто пользуюсь. Вам часто нужно подогнать изображение с любым соотношением сторон к элементу контейнера с указанным соотношением сторон. И иметь всю эту вещь полностью отзывчивым является обязательным.
/* For this demo only */
.container {
max-width: 300px;
margin: 0 auto;
}
.img-frame {
box-shadow: 3px 3px 6px rgba(0,0,0,.15);
background: #ee0;
margin: 20px auto;
}
/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
position: relative;
}
.aspect-ratio-1-1 {
padding-bottom: 100%;
}
.aspect-ratio-4-3 {
padding-bottom: 75%;
}
.aspect-ratio-16-9 {
padding-bottom: 56.25%;
}
/* This is the key part - position and fit the image to the container */
.fit-img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 80%;
max-height: 90%
}
.fit-img-bottom {
top: auto;
}
.fit-img-tight {
max-width: 100%;
max-height: 100%
}<div class="container">
<div class="aspect-ratio aspect-ratio-1-1 img-frame">
<img src="//placehold.it/400x300" class="fit-img" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-4-3 img-frame">
<img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-16-9 img-frame">
<img src="//placehold.it/400x400" class="fit-img" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-16-9 img-frame">
<img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample">
</div>
</div>Вы можете установить максимальную ширину и максимальную высоту независимо, изображение будет соответствовать наименьшему (в зависимости от значений и соотношения сторон изображения). Вы также можете настроить изображение так, чтобы оно было выровнено, как вы хотите (например, для изображения продукта на бесконечном белом фоне вы можете легко расположить его по центру)
Это решение не растягивает изображение и заполняет весь контейнер, но оно обрезает часть изображения.
HTML
<div><img src="/images/image.png"></div>
CSS
div {
width: 100%;
height: 10em;
overflow: hidden;
img {
min-width: 100%;
min-height: 100%;
}
Я только что опубликовал плагин jQuery, который делает именно то, что вам нужно, с большим количеством опций:
https://github.com/GestiXi/image-scale
Использование:
HTML
<div class="image-container">
<img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg">
</div>
JS
$(function() {
$("img.scale").imageScale();
});
Я вижу, что многие люди подходят для подбора объектов, что является хорошим вариантом. Но если вы хотите работать в старых браузерах, есть другой способ сделать это легко.
Пожалуйста, ознакомьтесь с моим ответом здесь: IE и Edge fix для пригонки объекта: cover;
Это довольно просто. Подход, который я выбрал, состоял в том, чтобы расположить изображение внутри контейнера с абсолютным, а затем поместить его прямо в центр, используя комбинацию:
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
Как только он окажется в центре, я даю изображение,
// For vertical blocks (i.e., where height is greater than width)
height: 100%;
width: auto;
// For Horizontal blocks (i.e., where width is greater than height)
height: auto;
width: 100%;
Это заставляет изображение получить эффект Object-fit: cover.
Вот демонстрация вышеуказанной логики.
https://jsfiddle.net/furqan_694/s3xLe1gp/
Эта логика работает во всех браузерах.
Простое решение - использовать flex-box. Определите CSS контейнера для:
.container{
display: flex;
justify-content: center;
align-items: center;
align-content: center;
overflow: hidden;
/*any custom height*/
}
Отрегулируйте ширину содержащегося изображения до 100%, и вы должны получить хорошее центрированное изображение в контейнере с сохранением размеров. Приветствия.
Следующее работает отлично для меня:
img{
height: 99999px;
object-fit:contain;
max-height: 100%;
max-width: 100%;
display: block;
margin: auto auto;
}
Я исправляю, используя это:
Код
<div class="container"><img src="image_url" /></div>
.container {
height: 75px;
width: 75px;
img {
object-fit: cover;
object-position: top;
display: block;
height: 100%;
width: 100%;
}
}
Укажите высоту и ширину, необходимую для вашего изображения, в div, содержащий тег . не забудьте указать высоту / ширину в правильном теге стиля. В теге
укажите max-height и max-width как 100%.
<div style="height:750px; width:700px;">
<img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>
Вы можете добавить детали в соответствующие классы после того, как вы поняли это правильно.
<style type="text/css">
#container{
text-align:center;
width: 100%;
height: 200px; /*set height*/
margin: 0px;
padding: 0px;
background-image:url('../assets/images/img.jpg');
background-size: content; /*scaling down large image to a div*/
background-repeat:no-repeat;
background-position:center;
}
</style>
<div id="container>
<!--inside container-->
</div>
Как ответили здесь, вы также можете использовать vh единицы вместо max-height: 100% если он не работает в вашем браузере (например, Chrome):
img {
max-height: 75vh;
}
Я центрировал и масштабировал пропорционально изображение внутри гиперссылки как по горизонтали, так и по вертикали следующим образом:
#link {
border: 1px solid blue;
display: table-cell;
height: 100px;
vertical-align: middle;
width: 100px;
}
#link img {
border: 1px solid red;
display: block;
margin-left: auto;
margin-right: auto;
max-height: 60px;
max-width: 60px;
}
Протестировано в IE, Firefox, Safari.
Больше информации о центрировании здесь.
Вы должны сообщить браузеру высоту, где вы размещаете его.
.example {
height: 220px; //DEFINE HEIGHT
background:url('../img/example.png');
background-size: 100% 100%;
background-repeat: no-repeat;
}
Редактировать: позиционирование изображения в предыдущей таблице было проблем в IE11 (max-height не работает в display:table элементы). Я заменил его на встроенное позиционирование, которое не только прекрасно работает как в IE7, так и в IE11, но также требует меньше кода.
Вот мой взгляд на эту тему. Это будет работать только если контейнер имеет указанный размер (max-width а также max-height кажется, не ладят с контейнерами, которые не имеют конкретного размера), но я написал CSS таким образом, что позволяет его использовать повторно (добавить picture-frame класс и px125 класс размера для вашего существующего контейнера).
В css:
.picture-frame
{
vertical-align:top;
display:inline-block;
text-align:center;
}
.picture-frame.px125
{
width:125px;
height:125px;
line-height:125px;
}
.picture-frame img
{
margin-top:-4px; /* inline images have a slight offset for some reason when positioned using vertical-align */
max-width:100%;
max-height:100%;
display:inline-block;
vertical-align: middle;
border:0; /* Remove border on imgs enclosed in anchors in IE */
}
И в HTML:
<a href="#" class="picture-frame px125">
<img src="http://i.imgur.com/lesa2wS.png"/>
</a>
DEMO
/* Main style */
.picture-frame
{
vertical-align:top;
display:inline-block;
text-align:center;
}
.picture-frame.px32
{
width:32px;
height:32px;
line-height:32px;
}
.picture-frame.px125
{
width:125px;
height:125px;
line-height:125px;
}
.picture-frame img
{
margin-top:-4px; /* inline images have a slight offset for some reason when positioned using vertical-align */
max-width:100%;
max-height:100%;
display:inline-block;
vertical-align: middle;
border:0; /* Remove border on imgs enclosed in anchors in IE */
}
/* Extras */
.picture-frame
{
padding: 5px;
}
.frame
{
border:1px solid black;
}<p>32px</p>
<a href="#" class="picture-frame px32 frame">
<img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
<img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px32 frame">
<img src="http://i.imgur.com/BDabZj0.png"/>
</a>
<p>125px</p>
<a href="#" class="picture-frame px125 frame">
<img src="http://i.imgur.com/lesa2wS.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
<img src="http://i.imgur.com/kFMJxdZ.png"/>
</a>
<a href="#" class="picture-frame px125 frame">
<img src="http://i.imgur.com/BDabZj0.png"/>
</a>Изменить: Возможное дальнейшее улучшение с помощью JS (масштабирование изображений):
function fixImage(img)
{
var $this = $(img);
var parent = $this.closest('.picture-frame');
if ($this.width() == parent.width() || $this.height() == parent.height())
return;
if ($this.width() > $this.height())
$this.css('width', parent.width() + 'px');
else
$this.css('height', parent.height() + 'px');
}
$('.picture-frame img:visible').each(function
{
if (this.complete)
fixImage(this);
else
this.onload = function(){ fixImage(this) };
});
Код ниже адаптирован сверху и протестирован мной с использованием изображения с именем storm.jpg Это полный HTML-код для простой страницы, которая отображает изображение. Это прекрасно работает и был проверен мной с www.resizemybrowser.com. Поместите код CSS вверху вашего HTML-кода, под разделом заголовка. Поместите код с изображением туда, куда вы хотите.
<html>
<head>
<style type="text/css">
#myDiv
{
height:auto;
width:auto;
}
#myDiv img
{
max-width:100%;
max-height:100%;
margin:auto;
display:block;
}
</style>
</head>
<body>
<div id="myDiv">
<img src="images/storm.jpg">
</div>
</body>
</html>
Простое решение ( 4-шаговое исправление!!), которое, кажется, работает для меня, ниже. Надеюсь, это поможет. Пример использует ширину для определения общего размера, но вы также можете перевернуть его, чтобы использовать высоту.
- Применить стиль CSS к контейнеру изображения (например,
- установите свойство ширины в размер, который вы хотите
- для измерений используйте% для относительного размера или автоматическое масштабирование (на основе контейнера изображения или отображения) -используйте px (или другое) для статического или установите измерение
- установить свойство высоты для автоматической регулировки на основе ширины
- НАСЛАЖДАТЬСЯ!
например
<img style="width:100%; height:auto;"
src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>
Принятый ответ от Thorn007 не работает, когда изображение слишком маленькое.
Чтобы решить эту проблему, я добавил коэффициент масштабирования. Таким образом, он увеличивает изображение и заполняет контейнер div.
Пример:
<div style="width:400px; height:200px;">
<img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>
заметки:
1 / для webkit вы должны добавить -webkit-transform:scale(4); -webkit-transform-origin: левый верхний; в стиле.
2 / с масштабным коэффициентом 4 у вас есть max-width = 400/4 = 100 и max-height = 200/4 = 50
3 / альтернативное решение - установить max-width и max-height на 25%, это еще проще
Все предоставленные ответы, включая принятые, работают только при условии, что div Обертка имеет фиксированный размер. Так вот, как это сделать, независимо от размера div Обертка есть, и это очень полезно, если вы разрабатываете адаптивную страницу:
Напишите эти заявления в вашем DIV селектор:
width : 8.33% /* or whatever percentage you want your div to take*/
max-height : anyValueYouWant /*(in px or %)*/
Затем поместите эти декларации в свой IMG селектор:
width : "100%" /* obligatory */
max-height : anyValueYouWant /*(in px or %)*/
ОЧЕНЬ ВАЖНО:
Значение maxHeight должно быть одинаковым для обоих DIV а также IMG селекторы.
Если вы используете загрузчик. Просто нужно добавить img-responsive класс для тега img:
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
Как видно из моего примера Codepen 2014 года , я сделал решение, которое будет работать для любой неизвестной комбинации ширины / высоты (соотношения сторон) с помощью как можно меньшего количества JavaScript, чтобы изменить CSS того, как изображение центрируется, когда соотношение сторон контейнера изменяется выше / ниже соотношения сторон изображения:
Попробуйте изменить размер контейнера, перетащив правый нижний угол:
Самый простой способ сделать это
с помощью подбора объекта
<div class="container">
<img src="path/to/image.jpg">
</div>
.container{
height: 300px;
}
.container img{
height:100%;
width:100%;
object-fit: cover;
}
Если вы используете загрузчик, просто добавьте img-responseive класс и измените на
.container img{
object-fit: cover;
}
Это было моим решением. Вам нужно будет вставить изображение дважды. Но он не использует js, и размер img будет изменяться как по ширине, так и по высоте. Вы можете нажать «запустить фрагмент кода - полная страница», открыть консоль разработчика и изменить размер окна, чтобы увидеть эффект реагирования.