Интересно, как я могу изменить размер изображения вместе с окном браузера, вот что я сделал до сих пор (или загрузил весь сайт в ZIP-архиве ).
Это нормально работает в Firefox, но есть проблемы в Chrome: изображение не всегда изменяется, это так или иначе зависит от размера окна, когда страница была загружена.
Это также нормально работает в Safari, но иногда изображение загружается с минимальной шириной / высотой. Возможно это связано с размером изображения, я не уверен. (Если загружается нормально, попробуйте выполнить обновление несколько раз, чтобы увидеть ошибку.)
Есть идеи, как я могу сделать это более пуленепробиваемым? (Если понадобится JavaScript, я тоже могу смириться, но CSS предпочтительнее.)
Ответы:
Это можно сделать с помощью чистого CSS и даже не требует медиа-запросов.
CSS:
А если вы хотите установить фиксированную максимальную ширину изображения, просто поместите его в контейнер, например:
Пример JSFiddle здесь . JavaScript не требуется. Работает в последних версиях Chrome, Firefox и IE (это все, что я тестировал).
источник
2018 и более поздние версии:
Использование единиц измерения, относящихся к области просмотра, должно облегчить вам жизнь, учитывая, что у нас есть изображение кошки:
Теперь мы хотим, чтобы эта кошка была внутри нашего кода, соблюдая при этом соотношение сторон:
Пока не очень интересно, но что, если мы захотим изменить ширину кошек, чтобы она составляла максимум 50% от области просмотра?
Же изображение, но теперь ограничиваются шириной максимума в 50vw VW (= ширина окно просмотр) означает , что изображение будет Й шириной окна просмотра, в зависимости от цифры предоставленной. Это также работает для высоты:
Это ограничивает высоту изображения до 20% от области просмотра.
источник
В IE
onresize
событие запускается при каждом изменении пикселя (ширины или высоты), поэтому может возникнуть проблема с производительностью. Отложите изменение размера изображения на несколько миллисекунд с помощью javascript window.setTimeout ().http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
источник
Установите для свойства изменения размера оба значения. Затем вы можете изменить ширину и высоту следующим образом:
источник
Вы используете jQuery?
Поскольку я быстро поискал плагины jQuery, и, похоже, у них есть какой-то плагин для этого, проверьте этот, он должен работать:
http://plugins.jquery.com/project/jquery-afterresize
РЕДАКТИРОВАТЬ:
Это решение CSS, я просто добавляю style = "width: 100%" и работает для меня, по крайней мере, в Chrome и Safari. У меня нет ie, так что просто протестируйте там и дайте мне знать, вот код:
источник
s why I
спрашиваю его, использует ли он jQuery, потому что, если он это делает, может быть хорошей идеей просто добавить плагин!Изначально я использовал следующий html / css:
Затем я добавил
class="img"
к<div>
этому:И все стало нормально работать.
источник
Вы можете использовать
scale
свойство CSS3 для изменения размера изображения с помощью css:Дальнейшее чтение :
источник
Просто используйте этот код. Большинство забывают указать max-width как максимальную ширину изображения.
Проверьте эту демонстрацию http://shorturl.at/nBKVY
источник
Пытаться
Работает только с блоком отображения и встроенным блоком, это не влияет на гибкие элементы, поскольку я только что потратил целую вечность, пытаясь выяснить.
источник