Как я могу динамически изменить размер изображения с помощью CSS при изменении ширины / высоты браузера? - PullRequest
Новая
       28

Как я могу динамически изменить размер изображения с помощью CSS при изменении ширины / высоты браузера?

87 голосов
/ 13 января 2011

Интересно, как я могу изменить размер изображения вместе с окном браузера, здесь - это то, что я уже сделал (или загрузил весь сайт в ZIP ).

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

Это также хорошо работает в Safari, но иногда изображение загружается с его минимальной шириной / высотой. Может быть, это связано с размером изображения, я не уверен. (Если все нормально, попробуйте несколько раз обновить страницу, чтобы увидеть ошибку.)

Любые идеи о том, как я могу сделать это более пуленепробиваемым? (Если потребуется JavaScript, я тоже могу с этим смириться, но CSS предпочтительнее.)

Ответы [ 7 ]

166 голосов
/ 25 февраля 2012

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

Чтобы сделать изображения гибкими, просто добавьте max-width:100% и height:auto. Изображение max-width:100% и height:auto работает в IE7, но не в IE8 (да, еще одна странная ошибка IE). Чтобы это исправить, вам нужно добавить width:auto\9 для IE8.

источник: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS: 

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

А если вы хотите установить фиксированную максимальную ширину изображения, просто поместите его в контейнер, например: 

<div style="max-width:500px;">
    <img src="..." />
</div>

Пример JSFiddle здесь . JavaScript не требуется. Работает в последних версиях Chrome, Firefox и IE (это все, что я тестировал).

12 голосов
/ 13 января 2011 
window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

В IE onresize событие запускается при каждом изменении пикселя (ширина или высота), поэтому может возникнуть проблема с производительностью.Задержка изменения размера изображения на несколько миллисекунд с помощью javascript window.setTimeout ().

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

11 голосов
/ 19 января 2018

2018 решение:

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

cat

Теперь мы хотим, чтобы эта кошка была внутри нашего кода, соблюдая пропорции: 

img {
  width: 100%;
  height: auto;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Пока что не очень интересно, но что, если мы хотим изменить высоту кошек, чтобы она составляла максимум 50% от области просмотра? 

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

То же изображение, но теперь оно ограничено максимальной шириной из 50vw vw (= ширина окна просмотра) означает, что изображение будет иметь ширину окна просмотра X, в зависимости от предоставленной цифры. Это также работает для высоты: 

img {
  width: auto;
  height: 100%;
  max-height: 20vh;
}
<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

Это ограничивает высоту изображения максимум 20% от области просмотра.

6 голосов
/ 09 июля 2014

Установите свойство resize для обоих.Затем вы можете изменить ширину и высоту следующим образом: 

.classname img{
  resize: both;
  width:50px;
  height:25px;
}
5 голосов
/ 13 января 2011

Используете ли вы jQuery?

Поскольку я быстро выполнил поиск по jQuery-плагинам, и у них, похоже, есть какой-то плагин, чтобы сделать это, проверьте, должен ли он работать:

http://plugins.jquery.com/project/jquery-afterresize

РЕДАКТИРОВАТЬ:

Это решение CSS, я просто добавляю style = "width: 100%" , и работает для меня, по крайней мере, в Chrome и Safari,У меня нет, то есть, просто протестируйте там, и дайте мне знать, вот код: 

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>
3 голосов
/ 14 августа 2015

Изначально я использовал следующий html / css: 

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

<div> 
  <img src="..." />
</div>

Затем я добавил class="img" к <div> следующим образом: 

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

И все стало работать нормально.

3 голосов
/ 27 августа 2014

Вы можете использовать свойство CSS3 scale для изменения размера изображения с помощью css: 

.image:hover {
  -webkit-transform:scale(1.2); 
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease; 
          transition: all 0.7s ease;
}

Дополнительная литература :

...