Wut? Как это работает?

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

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

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

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

 VivekDev03 февр. 2017 г., 10:53
Если вы используете загрузчик, добавьте класс, подобный этому class = "img-thumbnail". Вот и все.
 Shahid13 янв. 2011 г., 20:36
Используйте медиазапросы CSS3 или обработчик событий window.onresize в javascript.w3schools.com/jsref/event_onresize.asp

Ответы на вопрос(7)

Поскольку я быстро выполнил поиск по 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>
 depi13 янв. 2011 г., 21:47
так без JS это не возможно? Я нашел простое решение, как этотunstoppablerobotninja.com/search/...Однако я не смог полностью реализовать его в моем шаблоне
 Arthur Neves13 янв. 2011 г., 21:23
конечно, вы совершенно правы, чтоs why IЯ спрашиваю его, использует ли он jQuery, потому что если это так, то может быть хорошей идеей просто добавить плагин!
 user138519113 янв. 2011 г., 21:16
JQuery не нужен для такой простой проблемы. Почему загрузка в 50 КБ + (целая библиотека) выгодна для нескольких строк JS?
 Arthur Neves13 янв. 2011 г., 22:13
Просто отредактируйте ответ, включая решение CSS.

Вы можете использовать CSS3scale свойство изменить размер изображения с помощью 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 эффект наведения при переходе, трансформации, анимации
window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

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

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

 user138519113 янв. 2011 г., 21:16
Upvote для простого, чистого решения JS.

ширину и высоту следующим образом:

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

Первоначально я использовал следующий 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>

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

 Simon09 янв. 2019 г., 19:05
Wut? Как это работает?

Можно быть сделано с чистым 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 (это все, что я тестировал).

 SearchForKnowledge25 авг. 2014 г., 20:52
VS дает мне ошибку дляwidth: auto\9;
 Kurt Schindler01 мар. 2012 г., 17:28
@GDR Я бы не хотел, чтобы изображение вырастало за пределы его исходного размера, оно просто пикселизировалось и выглядело безобразно Если вам нужно сделать больше, я бы просто начал с большего изображения.
 Mave07 окт. 2013 г., 21:18
Установка max-width на 100% и height на auto ничего не сделала для меня - я действительно работал с контейнером. Оберните изображение в div, установите максимальную высоту / ширину и позвольте изображению (#div img {}) иметь ширину 100% и высоту 100%.
 GDR01 мар. 2012 г., 16:15
Я протестировал ссылку jsfiddle как с Opera 11, так и с некоторым недавним Firefox, и хотя он хорошо изменяет размер изображения при уменьшении окна, он не может этого сделать, когда окно выходит за пределы 650 пикселей
 GDR03 мар. 2012 г., 13:19
Хорошо, тогда я неправильно предположил, что в этом суть этого вопроса, извините.
Решение 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 (= ширина окна просмотра) означает, что изображение будет иметь ширину окна просмотра 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% от области просмотра.

 Harvey Mushman17 окт. 2018 г., 00:37
Спасибо, это правильный ответ в 2018 году!
 JSG05 мая 2018 г., 08:56
Голосуйте за макет и демонстрации!

Ваш ответ на вопрос