Как автоматически разместите изображение, чтобы соответствовать контейнеру «Div»?

StackOverflow https://stackoverflow.com/questions/3029422

  •  26-09-2019
  •  | 
  •  

Вопрос

Как вы автоматически измените размер большого изображения так, чтобы он поместился в меньшую ширину Div Container, в то время как поддерживает его ширину: соотношение высоты?

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

Это было полезно?

Решение

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

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>

Другие советы

объект-посадка

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

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

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

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

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

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

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

  1. Если ваше изображение и контейнер являются «портретной формой» или оба «ландшафтной формы» (выше, чем они широки или шире, чем они высокие, соответственно), то не имеет значения, что из высоты или ширины «% 100» Отказ
  2. Если ваше изображение является портретом, и ваш контейнер является пейзажем, вы должны установить height="100%" на изображении.
  3. Если ваше изображение является ландшафтом, и ваш контейнер является портретом, вы должны установить 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);
    }

Сделай это проще!

Дать контейнер фиксированный height а потом для img метка внутри него, установить width а также max-height.

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

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

Прекрасный взлом.

У вас есть два способа сделать изображение отзывчивым.

  1. Когда изображение - это фоновое изображение.
#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 тег, чтобы поставить изображения, как это лучше, чем фоновая картинка с точки зрения SEO Как вы можете написать ключевое слово в alt. принадлежащий IMG ярлык. Так вот вы можете сделать изображение отзывчивым.

  1. Когда изображение в 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>

Запустить его здесь

Проверьте мое решение: 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;
}

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

background-size: cover;

Так и будет «Масштабировать фоновое изображение, чтобы быть максимально большим, чтобы область фона полностью покрыта фоновым изображением. Некоторые части фонового изображения не могут быть в представлении в области области позиционирования« -- W3Schools.

Я просто опубликовал плагин jQuery, который имеет именно то, что вам нужно с большим количеством вариантов:

https://github.com/ geresixi/image-sockale.

Применение:

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

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

HTML:

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

CSS:

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

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

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

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

У меня гораздо лучшее решение без потребностей какого-либо 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>

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

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

вu003Cimg> тег, дай max-height а также max-width как 100%.

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

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

Код ниже адаптирован из предыдущих ответов и проверяется мной, используя изображение, называемое storm.jpg.

Это полный HTML-код для простой страницы, которая отображает изображение. Это работает идеально и было проверено мной с www.resizieMeybrowser.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>

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

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

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

#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.

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

Принятый ответ от 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 у вас есть максимальная ширина = 400/4 = 100 и максимальная высота = 200/4 = 50
  3. Альтернативное решение состоит в том, чтобы установить максимальную ширину и максимальную высоту на 25%. Это даже проще.
<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>

Редактировать: Предыдущее расположение изображения на основе таблиц было выпущено в 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>

Демонстрация 

/* 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 (Upscaling Images):

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

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

img {
    max-height: 75vh;
}

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

Пожалуйста, оформить заказ мой ответ здесь:IE и крайнее исправление для объекта-посадки: крышка;

Это довольно просто. Подход, который я взял, должен был расположить изображение внутри контейнера с абсолютно а потом поместите его прямо в центр Использование комбинации: 

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

Это делает изображение, чтобы получить эффект объекта-посадки: крышку.

Вот демонстрация вышеуказанной логики.

https://jsfiddle.net/furqan_694/s3xle1gp/

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

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

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

Например,

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Проверьте мой ответ, Сделать изображение отзывчивым - простейшим способом - 

img{
    width: 100%;
    max-width: 800px;
}

Самый простой способ сделать это, используя object-fit:

<div class="container">
  <img src="path/to/image.jpg">
</div>

.container{
   height: 300px;
}

.container img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}

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

.container img{
    object-fit: cover;
}

Или вы можете просто использовать:

background-position:center;
background-size:cover;

Теперь изображение займет все пространство DIV.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top