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

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

1300 голосов
/ 12 июня 2010

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

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

Ответы [ 31 ]

7 голосов
/ 03 апреля 2018

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

img{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}
6 голосов
/ 13 января 2016

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

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

5 голосов
/ 23 февраля 2015

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

.example {
    height: 220px; /* DEFINE HEIGHT */
    background: url('../img/example.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
5 голосов
/ 12 марта 2013

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

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

#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 голосов
/ 26 марта 2015

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

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 голосов
/ 08 марта 2013

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

В теге imageукажите 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 голосов
/ 28 мая 2014 
<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 голосов
/ 22 мая 2014

Принятый ответ от 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. Альтернативное решение состоит в том, чтобыустановите максимальную ширину и максимальную высоту в 25%.Это еще проще.
2 голосов
/ 27 ноября 2014

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

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

Например, 

<img style="width:100%; height:auto;"
    src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...