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

Question

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

---

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

Answer 1

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

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>

Answer 2

Подгонка объекта

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

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

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

Fiddle: http://jsfiddle.net/mbHB4/7364/

Answer 3

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

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

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

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

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

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

height
width
viewbox

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

Answer 4

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

Answer 5

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

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

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

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

Answer 6

Красивый хак.

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

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, так как он лучше, чем background-image с точки зрения SEO , поскольку вы можете написать ключевое слово в alt из img тег. Так что вот вы можете сделать изображение отзывчивым.

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

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

Answer 7

Ознакомьтесь с моим решением: 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;
}

Answer 8

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

background-size: cover;

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

Answer 9

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

Answer 10

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

HTML:

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

CSS:

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

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