it-swarm.com.ru

Как я могу автоматически изменить размер изображения, чтобы он соответствовал контейнеру div?

Как автоматически изменить размер большого изображения, чтобы оно помещалось в контейнер div меньшей ширины при сохранении соотношения ширины и высоты?


Пример: stackoverflow.com - когда изображение вставляется в панель редактора, а изображение слишком велико для размещения на странице, размер изображения автоматически изменяется.

1288
001

Не применяйте явную ширину или высоту к тегу изображения. Вместо этого дайте это:

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="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
1658
Kevin

объект-FIT

Оказывается, есть еще один способ сделать это.

<img style='height: 100%; width: 100%; object-fit: contain'/>

сделаю работу. Это CSS 3 вещи.

Скрипка: http://jsfiddle.net/mbHB4/7364/

321
Shih-Min Lee

В настоящее время нет способа сделать это правильно детерминированным способом с помощью изображений фиксированного размера, таких как файлы JPEG или PNG.

Чтобы пропорционально изменить размер изображения, вы должны установить либо высоту или ширину на "100%", но не оба. Если вы установите оба значения на "100%", ваше изображение будет растянуто.

Выбор высоты или ширины зависит от вашего изображения и размеров контейнера:

  1. Если ваше изображение и контейнер имеют "портретную форму" или обе "ландшафтной формы" (выше, чем они широкие, или шире, чем они высокие, соответственно), то не имеет значения, какая из высоты или ширины равна "% 100" ,.
  2. Если ваше изображение портретное, а контейнер горизонтальный, вы должны установить height="100%" на изображение.
  3. Если ваше изображение имеет альбомную ориентацию, а ваш контейнер - портретное, вы должны установить width="100%" на изображение.

Если ваше изображение представляет собой SVG, который представляет собой векторный формат изображения переменного размера, у вас может быть расширение, чтобы оно соответствовало контейнеру автоматически.

Вам просто нужно убедиться, что файл SVG не имеет ни одного из этих свойств, установленных в теге <svg>:

height
width
viewbox

Большинство программ векторного рисования устанавливают эти свойства при экспорте файла SVG, поэтому вам придется вручную редактировать файл каждый раз, когда вы экспортируете, или писать скрипт для этого.

96
Neil

Вот решение, которое выровняет ваш 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);
    }
67
Humble Rumble

Упрости!

Задайте контейнеру исправленоheight, а затем для тега img внутри него установите width и max-height.

<div style="height: 250px">
     <img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>

Разница в том, что вы устанавливаете width равным 100%, а не max-width.

40
Mehdi Maghrooni

Проверьте мое решение: http://codepen.io/petethepig/pen/dvFsA

Он написан на чистом CSS, без какого-либо кода JavaScript. Он может обрабатывать изображения любого размера и любой ориентации.

Учитывая такой 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;
}
21
dmitry

Вы можете установить изображение в качестве фона для div, а затем использовать CSS background-size свойство :

background-size: cover;

Он будет "масштабировать фоновое изображение настолько большим, насколько это возможно, чтобы фоновая область была полностью покрыта фоновым изображением. Некоторые части фонового изображения могут не отображаться в пределах расположения фона область " - W3Schools

20
Chuck Dries

Я только что опубликовал плагин 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>

JavaScript

$(function() {
    $("img.scale").imageScale();
});
9
Nicolas BADIA

Это решение не растягивает изображение и заполняет весь контейнер, но оно обрезает часть изображения.

HTML:

 <div><img src="/images/image.png"></div>

CSS:

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}
9
Miia Klingstedt

Следующее работает отлично для меня:

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}
7
Chong Lip Phang

У меня есть гораздо лучшее решение без необходимости JavaScript. Это полностью отзывчиво, и я использую это много. Вам часто нужно подогнать изображение с любым соотношением сторон к элементу контейнера с указанным соотношением сторон. И иметь всю эту вещь полностью отзывчивым является обязательным.

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

Вы можете установить максимальную ширину и максимальную высоту независимо; изображение будет соответствовать наименьшему (в зависимости от значений и пропорций изображения). Вы также можете настроить изображение так, чтобы оно было выровнено, как вы хотите (например, для изображения продукта на бесконечном белом фоне вы можете легко расположить его по центру).

6
actimel

Вы должны сообщить браузеру высоту, где вы размещаете его:

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
5
Rick

Код ниже адаптирован из предыдущих ответов и протестирован мной с использованием изображения под названием 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>
5
dan

Я центрировал и масштабировал пропорционально изображение внутри гиперссылки по горизонтали и вертикали следующим образом:

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

Он был протестирован в Internet Explorer, Firefox и Safari.

Более подробная информация о центрировании здесь .

4
bancer
<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>
4
easd

Укажите высоту и ширину, необходимую для вашего изображения, div, который содержит тег <img>. Не забудьте указать высоту/ширину в правильном теге стиля.

В теге <img> укажите max-height и max-width как 100%.

<div style="height:750px; width:700px;">
    <img alt="That Image" style="max-height:100%; max-width:100%;" src="">
</div>

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

4
AZD

Edit: Предыдущее позиционирование изображений на основе таблиц имело проблемы в Internet Explorer 11 (max-height не работает в элементах display:table). Я заменил его на встроенное позиционирование, которое не только прекрасно работает как в Internet Explorer 7, так и в Internet Explorer 11, но также требует меньше кода.


Вот мой взгляд на эту тему. Это будет работать только в том случае, если контейнер имеет указанный размер (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 images enclosed in anchors in Internet Explorer */
}

И в 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 images enclosed in anchors in Internet Explorer */
}

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

Правка: Возможное дальнейшее улучшение с помощью JavaScript (масштабирование изображений):

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) };
});
4
jahu

Принятый ответ от 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:left top; в стиле.
  2. С масштабным коэффициентом 4 у вас есть max-width = 400/4 = 100 и max-height = 200/4 = 50
  3. Альтернативное решение - установить max-width и max-height на 25%. Это даже проще.
4
user217447

Простое решение (4-х шаговое исправление !!), которое мне подходит, приведено ниже. В примере для определения общего размера используется ширина, но вы также можете перевернуть ее, чтобы использовать высоту.

  1. Примените CSS-стиль к контейнеру изображения (например, <img>)
  2. Установите для свойства width желаемое измерение
    • Для измерений используйте % для относительного размера или автоматическое масштабирование (на основе контейнера изображения или отображения)
    • Используйте px (или другое) для статического или заданного измерения
  3. Установите свойство высоты для автоматической регулировки на основе ширины
  4. НАСЛАЖДАТЬСЯ!

Например,

<img style="width:100%; height:auto;"
    src="https://googledrive.com/Host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>
2
young chisango

Все предоставленные ответы, включая принятый, работают только при условии, что оболочка 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.

2
Billal Begueradj

Я исправил эту проблему, используя следующий код:

<div class="container"><img src="image_url" /></div>
.container {
    height: 75px;
    width: 75px;
}

.container img {
    object-fit: cover;
    object-position: top;
    display: block;
    height: 100%;
    width: 100%;
}
2
Serkan KONAKCI

Как ответ здесь , вы также можете использовать vh единицы вместо max-height: 100%, если они не работают в вашем браузере (например, Chrome):

img {
    max-height: 75vh;
}
2
gaborous

Если вы используете Bootstrap, вам просто нужно добавить класс img-responsive в тег img:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

Загрузочные изображения

1
HoangYell

Простое решение - использовать flexbox. Определите CSS контейнера для:

.container{
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    overflow: hidden;
    /* Any custom height */
}

Отрегулируйте ширину содержащегося изображения до 100%, и вы должны получить хорошее центрированное изображение в контейнере с сохранением размеров.

1
Mateo Marin

Я вижу, что многие люди подходят к объектам , что является хорошим вариантом. Но если вы хотите работать в старых браузерах , есть другой способ сделать это легко.

Пожалуйста, ознакомьтесь с моим ответом здесь: IE и Edge исправляют для подгонки объекта: 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/

Эта логика работает во всех браузерах.

0
Mohammed Furqan Rahamath M

Решение легко с небольшим количеством математики ...

Просто поместите изображение в div, а затем в HTML-файл, где вы указываете изображение. Установите значения ширины и высоты в процентах, используя пиксельные значения изображения, чтобы вычислить точное соотношение ширины и высоты.

Например, допустим, у вас есть изображение шириной 200 пикселей и высотой 160 пикселей. Вы можете с уверенностью сказать, что значение ширины будет 100%, потому что это большее значение. Чтобы затем вычислить значение высоты, вы просто делите высоту на ширину, которая дает процентное значение 80%. В коде это будет выглядеть примерно так ...

<div class="image_holder_div">
    <img src="some_pic.png" width="100%" height="80%">
</div>
0
user2796283