9

Имеется некий div с классом .img-container и внутри картинка.

<div class="img-container">
    <img src="http://dummyimage.com/600x400/000/fff.png">
</div>

Истинные размеры картинки - могут быть любые. Внимание! Вопрос.

Как сделать так чтобы картинка вписывалась в размер DIV по ширине и высоте, и пропорционально увеличивалась или уменьшалась, если DIV будет менять размеры (а он будет менять размеры)?

Аналог на CSS для DIV:

.img-container {
    background-size: cover;
    width: x;
    height: y;
}

10 ответов 10

7

вот пример когда контейнер ресайзится в результате ресайза окна

jQuery(function ($) {
    function fix_size() {
        var images = $('.img-container img');
        images.each(setsize);

        function setsize() {
            var img = $(this),
                img_dom = img.get(0),
                container = img.parents('.img-container');
            if (img_dom.complete) {
                resize();
            } else img.one('load', resize);

            function resize() {
                if ((container.width() / container.height()) < (img_dom.width / img_dom.height)) {
                    img.width('100%');
                    img.height('auto');
                    return;
                }
                img.height('100%');
                img.width('auto');
            }
        }
    }
    $(window).on('resize', fix_size);
    fix_size();
});

http://jsfiddle.net/oceog/bQjk8/

если хотите без jQuery, это реально, но делайте сами :)

7
  • Понятное дело что без jQuery не обойтись (или без JS). Суть не в том. Нужен заполненый картинкой DIV :jsfiddle.net/chetson/bQjk8/2/#update
    – Chetson
    14 окт 2013 в 9:36
  • так div не может быть заполнен, если пропорции не совпадают. вам обрезать что-ли надо ?
    – zb'
    14 окт 2013 в 9:38
  • Вот в ВК к примеру - фотогаллерея. Изображения подстраиваются под заданный размер div и отсекается лишние от картинки, img вписывается в DIV и выглядит очень хорошо. В моем случае имеется еще и адаптивный интерфейс, в котором эти DIV еще и меняются. Было бы конечно проще в php цикле выводить что то типа <div class="image" style="background-image: url('ссылка') center center no-repeat;"></div> Но это не дружелюбно для СЕО и вообще плохой тон.
    – Chetson
    14 окт 2013 в 9:43
  • 1
    jsfiddle.net/oceog/bQjk8/3 типа этого, только не по центру становится, надо вычислять какие отрицательные margin приделать к картинке.
    – zb'
    14 окт 2013 в 9:44
  • 1
    jsfiddle.net/oceog/bQjk8/5
    – zb'
    14 окт 2013 в 9:53
5

.panel {
  width: 300px;
  height: 200px;
  
  background: #fff;
  
  border: 1px solid #cecece;
  border-radius: 5px;
  
  position: absolute;
}
  
  
.container {
  width: 90%;
  height: 90%;
  
  border: 1px solid #cecece;
  border-radius: 5px;
  
  display: flex;
  
  justify-content: center;
  align-items: center;
  
  overflow: hidden;
  
  position: relative;
  
  transform: translate(-50%, -50%);
  
  top: 50%;
  left: 50%;
}
  
img {
  max-width: none;
  
  min-width: auto;
  min-height: auto;
  
  height: 100%;
  
  position: absolute;
  
  top: 50%;
  left: 50%;
  
  transform: translate(-50%, -50%);
}
<div class="panel">
  <div class="container">
    <img src="https://upload.wikimedia.org/wikipedia/en/4/4e/Steamboat-willie.jpg" alt="">
  </div>
</div>

1
  • к сожалению картинка вписывается только по высоте..
    – user220409
    1 ноя 2016 в 19:46
3

А ларчик то просто открывается...

img {max-width:100%;height:auto;}

И будут у вас ВСЕ картинки на сайте подгоняться под размер вашего дива. Хоть со старта, хоть при таскании ширины/высоты окна браузера. И это применимо ко всему. Хоть картинка, хоть видео, хоть ещё что-то, что придумаете. Учите цсс и хтмл, прежде чем заниматься жабой.

1
3

Попробуйте сделать так:

.img-container {
    background-size: cover;
    width: 300px; // например
    height: 100px;
    overflow: hidden;
}
.img-container img {
    width: 100%;
    height: 100%;       
}

Обновление

Если не получится, попробуйте так

.img-container {
    background-size: cover;
    width: 300px;
    height: 100px;
    overflow: hidden;
    background-color: #F50000;
    text-align: center;
}
.img-container img {
    height: 100%;
    width: auto;
    max-width: 100%;
}

Средствами CSS это сложно реализовать (попробуйте в мой пример у .img-container в height подставить 300px;). Можно попробовать с пом. ajax вычислять широту и высоту контейнера и отдавать параметры картинке img.

1
3

Все что нужно

.img-container img {
    max-width: 100%;
    height: auto;
    max-height:100%
}
2

Думаю тут проще было бы все сделать через background:

<div class="img"></div>

.img {
    width: 150px;
    height: 150px;
    background: url(https://goo.gl/ypQyGs) no-repeat center/cover;
}
1
.img-container {
    width: 362px;
    height: 185px;
    position: relative;
    overflow: hidden;

img {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 100%;   
}

Если хочешь добавить адаптивность, еще один блок выше создай, сделай его flex, задай атрибут flex-wrap: wrap

1

Если через CSS, у тебя div с определенным классом, присвой картинке этот же класс, у тебя получится картинка такой же формы что и тот div в который ты ее "запихиваешь". И как раз таки при изменении параметров div'a этого класса, картинка будет тоже изменяться (увеличишь div в двое, то и картинка увеличится в двое). Так что если все грамотно сделать через классы, то это должно тебе помочь. Это мое субъективное мнение и как вариант помочь решить твою "проблему"

1

Для .img-container пишем следующее:

width: 200px;     // произвольная ширина контейнера
height: 150px;    // произвольная высота контейнера
display: flex;
justify-content: center;  // если нужно разместить по центру (горизонтали)

Для img пишем следующее:

max-width: 100%;    // не обязательно
height: 100%;

Свойство width задавать не надо, его менять на width: auto; нужно только в том случае, если это свойство было переопределено (например стилями браузера, подключенными библиотеками и т.д)

Суть в следующем:

Если задать для img width: 100%, то он растянет его на всю ширину блока. Поэтому мы задаем ему только height: 100%, тогда изображение влезет целиком, но не растянется. Свойство width вроде по дефолту стоит в auto, поэтому пропорции возьмутся из исходного состояния.

0

.img-container img {width: 100%; height: 100%; object-fit: cover;} Собсно все.
По просьбе дополняю: если размеры блока заданы жестко, мы можем использовать height: 100%;Свойство object-fit аналог background-size для замещаемых элементов https://developer.mozilla.org/ru/docs/Web/CSS/object-fit

1
  • 2
    пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 15 окт 2019 в 17:47

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.