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

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

У Firefox це добре працює, але в Chrome є проблеми: зображення не завжди змінює розмір, це якимось чином залежить від розміру вікна, коли сторінка була завантажена.

Це також добре працює в Safari, але іноді зображення завантажується мінімальною шириною / висотою. Можливо, це викликано розміром зображення, я не впевнений. (Якщо він завантажується нормально, спробуйте оновити кілька разів, щоб побачити помилку.)

Будь-які ідеї, як я можу зробити це більш бронезахисним? (Якщо потрібен JavaScript, я теж можу працювати з цим, але CSS є кращим.)

Це можна зробити за допомогою чистого CSS і навіть не вимагає медіа-запитів.

Щоб зробити зображення гнучкими, просто додайте max-width:100%та height:auto. Зображення max-width:100%і height:autoпрацює в IE7, але не в IE8 (так, ще одна дивна помилка IE). Щоб виправити це, вам потрібно додати width:auto\9IE8.

джерело: 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 (це все, що я перевірив).

Рішення на 2018 рік та новіші версії:

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

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

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 (= ширина вікно перегляд) означає , що зображення буде Й шириною вікна перегляду, в залежності від цифри наданої. Це також працює для висоти:

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% вікна перегляду.

window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

У IE onresizeподія звільняється від кожної зміни пікселя (ширини чи висоти), тому може виникнути проблема з продуктивністю. Затримка зміни розміру зображення на кілька мілісекунд, використовуючи window.setTimeout () JavaScript.

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

Встановіть властивість зміни розміру на обидва. Тоді ви можете змінити ширину та висоту так:

.classname img{
  resize: both;
  width:50px;
  height:25px;
}

Ви використовуєте 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>

Спочатку я використовував наступний 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>

І все почало нормально працювати.

Ви можете використовувати scaleвластивість CSS3 для зміни розміру зображення за допомогою css:

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

Подальше читання :

• CSS3 2D перетворює
• CSS3 Перехід, трансформації та анімація ефекту наведення

Просто використовуйте цей код. Що більшість забуваємо - це вказати максимальну ширину як максимальну ширину зображення

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

Перевірте цю демонстрацію http://shorturl.at/nBKVY

Спробуйте

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

Працює лише з блоком дисплея та вбудованим блоком, це не впливає на гнучкі елементи, оскільки я щойно витрачав століття, намагаючись це з’ясувати.