Как изменять размер изображения CSS
Атрибут width HTML указывает исходную ширину изображения в пикселях.
Управление шириной изображения
До появления CSS ширина изображения задавалась с помощью атрибута width . Такой метод на сегодняшний день является устаревшим. Но при отсутствии любых других правил CSS , определяющих ширину изображения, он все равно будет работать в большинстве браузеров. Тем не менее, это противоречит спецификации HTML5 :
Примечание: Оригинальное изображение гораздо шире, чем 500 пикселей.
Управление размером картинки в CSS
Для управления HTML max width изображения следует использовать CSS :
#fixed-width-flamingo < width: 500px; >
Адаптивная ширина изображения
Обычно не требуется задавать конкретную ширину изображения. Если указать фиксированную ширину, она может оказаться слишком маленькой для экранов устройств некоторых пользователей и слишком большой для других. Лучше всего поместить изображение внутрь адаптивного контейнера ( определяемого в процентах ), а затем задать для него заполнение по всей ширине:
#responsive-image < width: 100%; height: auto; >
Если нужно предоставить для всех пользователей полностью адаптивный дизайн, примените атрибут srcset , чтобы указать дополнительные размеры изображения. Или элемент , чтобы задать альтернативный дизайн изображения.
Информирование браузера — основная цель атрибута width
В соответствии со спецификацией, основная цель тега width в HTML- сообщить браузеру фактическую, исходную ширину ( в пикселях ) изображения. Он должен применяться для описания исходного файла, а не того, как нужно отображать его на экране. Эта информация может быть использована браузером для оптимизации рендеринга. Тогда именно CSS , а не элемент width будет определять фактический размер выводимого изображения:
#responsive-flamingo < width: 100%; height: auto; >
Примечание: На большинстве экранов изображение будет выходить за пределы контейнера, если оно имеет ширину более 1280 пикселей.
Должен ли я использовать width?
Это поможет браузерам быстрее и более аккуратно отображать страницы, особенно в сочетании с элементом height. Рассмотрим приведенный выше пример.
В CSS width HTML устанавливается на 100% , а высота — на auto . Браузер не сможет узнать, сколько пикселей по высоте выделить для рисунка, пока не загрузит все изображение полностью и не проверит заголовок файла, чтобы узнать его размер. Если атрибуты width и height отсутствуют, программа не сможет этого сделать. Но если оба атрибута указаны, браузер сможет вычислить это с помощью математических расчетов:
display_height = img_height × ( display_width ÷ img_width )
Сделав это, можно предотвратить ситуацию, когда при загрузке изображения оно сдвигает контент вниз и происходит раздражающий резкий скачок, в результате которого пользователь теряет из виду часть текста. Используйте атрибуты HTML width height правильно – определяйте исходную высоту изображения, а не указывайте размер, в котором оно должно отображаться на странице.
Поддержка браузерами
| IE | Firefox | Chrome | Edge | Safari | Opera |
| Полностью | Полностью | Полностью | Полностью | Полностью | Полностью |
CSS: Как ограничить максимальный размер изображения до 450px?
Приветствую! Сабж. Нужно через css уменьшить размер картинки до 450px. Сама картинка может быть хоть 2000px, хоть 3000px. Но если картинка к примеру 300 или 449px то увеличивать её не надо. Это возможно?
21 декабря 2008, 12:38
На сайте с 29.05.2008
21 декабря 2008, 12:57
Коновалов Сергей:
img <
max-width: 450px; //ширина
max-height: 450px; //высота
>
В ИЕ это не сработает. насчет css не уверен, что так можно. Я бы сделал в img: ��
На сайте с 28.12.2007
21 декабря 2008, 13:16
pajed:
Я бы сделал в img:
Nemesis-TNT:
если картинка к примеру 300 или 449px то увеличивать её не надо
я юзал пре-проверку на размер, подставляя скриптом имя класса для изображения. понимание того, что отдельный набор превьюшек решает пришло чуть позже 🙂 думаю к тс тоже придёт. даже быстрее, учитывая вводные:
Как задать разную ширину для изображения в галерее в зависимости от размеров (ориентации) изображения
Сверстал такую галерею, но проблема в следующем. Все картинки одинаковых пропорций. Возможно ли сделать так, чтобы те изображения, которые в альбомной ориентации сохраняли свои пропорции. То есть ширина так и была больше высоты. Но высота изображений в рамках одного ряда была по-прежнему одинаковой. https://i.stack.imgur.com/EbnQO.png https://i.stack.imgur.com/Ijkmz.jpg
Отслеживать
задан 24 июн 2021 в 21:46
11 3 3 бронзовых знака
Задайте фиксированную высоту, а ширину не трогайте, ну или на крайний случай сделайте max-width .
24 июн 2021 в 21:56
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Масштабирование изображений с сохранением пропорций можно реализовать множеством способов. Здесь приведу только два из них, которые сам использую чаще всего.
Ограничение размеров img по элементу-обертке
Классический кроссбраузерный способ: помещаем img в div (например), и указываем в стилях width | max-width и/или height | max-height со значением 100% :
* < margin: 0; padding: 0; >.row < display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem; background: #eee; >.row .img-wrap < height: 110px; >.img-wrap > img < height: 100%; >/* ◄◄◄ */ 
Нюанс: лучше избегать одновременного указания width: 100%; и height: 100%; — потому что при несовпадении соотношений сторон изображения и обертки, это приведет к искажению. С max-width: 100%; max-height: 100%; такого не случится, но изображение конечно не будет масштабироваться «вверх» до родительских размеров (обертки) при превышении собственных.
object-fit
Всего лишь object-fit: contain; в стилях — это суперпросто, суперудобно, правда без поддержки в IE (которую до сих пор просят иногда):
* < margin: 0; padding: 0; >.row < display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem; background: #eee; >.row > img < height: 110px; object-fit: contain; >/* ◄◄◄ */ Примеры респонсивны — сохранение высоты изображений при их переносе (от flex-wrap), можно проверить уменьшив окно браузера.
Одно последнее изображение в каждом примере масштабируется «вверх», а остальные изображения уменьшаются при необходимости (второй сценарий гораздо более частый).
Изменить размер изображения (уменьшить в 2 раза)
Нужно что-бы картинка, была в половину своей высоты и ширины, при этом мы ее заранее не знаем. Пытался сделать с помощью jscript, но видимо руки не оттуда ростут..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
"http://www.w3.org/TR/REC-html40/loose.dtd"> html> head> title>/title> meta http-equiv="Content-Language" content="ru"> meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> meta name="author" content=""> meta name="generator" content="Web Development Studio (http://delphiworld.narod.ru)"> link rel="stylesheet" type="text/css" href="style.css"> /head> body aligh="center"> div id="center">img src="img.jpg" alt="Моя улюблена картинка" id="myImg">/div> script language="JavaScript" type="text/javascript"> document.images.myImg.width = document.images.myImg.width / 2; //--> /script> /body> /html>
1 2 3 4
#center
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:
Уменьшить размер изображения
Привет всем! Есть вопрос. Достаю изображение из базы данных в виде base64String. Функцией.
Подскажите как уменьшить размер изображения на выходе
Вот есть скрипт который создаёт с mp4 gif изображение. но на выходе получаеться большой файл как.
Увеличить размер изображения в два раза с сохранением количества пикселей
Необходимо рисунок 250х250 визуально увеличить и засунуть в picture box размером 500х500, т.е.
Изменить размер изображения
Думаю тема избита на нет, но я не могу догнать. Один модератор подробно показал как делать в этой.
1915 / 1065 / 384
Регистрация: 06.12.2008
Сообщений: 2,802
я может вас не правильно, но делается все средствами html
1 2 3
html> img src="img.jpeg" width=50% height=50%> /html>
1212 / 909 / 270
Регистрация: 25.07.2009
Сообщений: 4,361
Записей в блоге: 5
тогда позиционирование идет относительно размеров окна а не первычных размеров изображения.
у меня родительский див размером на 600 пикселей, вот изображение у меня ровно на 300 идет
Добавлено через 3 минуты
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40
html> head> link rel=«stylesheet» type=«text/css» href=«style.css»> /head> body aligh=«center»> div align=«center»>div id=«main»> div id=«center»>a href=«proba1.html»>img src=«img.jpg» alt=«Моя улюблена картинка» id=«myImg»>/a>/div> document.images.myImg.width = document.images.myImg.width / 2; //—> /script> a href=«mailto:read@write.com.ua»>Моя пошта/a> /div>/div> /body> /html> #center < color : green; text-align : center; >#main < width : 800px; >a : link < text-decoration : underline; color : blue; >a : active < text-decoration : underline; color : blue; >a : hover < text-decoration : none; color : green; >a : visited
кстати, я забыл как ссылки настраивать, суть в том, что-бы они всегда были подчеркнутыми и синими, кроме момента, когда наводишь мишь, когда они меються на зеленые и убирается подчеркивание.
Регистрация: 26.02.2010
Сообщений: 95
я не спец в css.
но может так можно?)
1 2 3 4 5
table border="1"> tr width="200"> td align="center" width="200" height="200" valign="middle">ваша картинка/td> /tr> /table>
1212 / 909 / 270
Регистрация: 25.07.2009
Сообщений: 4,361
Записей в блоге: 5
эээ. размер изображения заведомо неизвестен
WEB-developer
898 / 729 / 80
Регистрация: 12.03.2009
Сообщений: 2,804
Записей в блоге: 2
делаем так
1 2 3 4 5 6 7 8 9 10
script type="text/javascript" language="javascript"> function small() < var w=document.images[0].width; var h=document.images[0].height; document.images[0].width=w*0.5; document.images[0].height=h*0.5; >/script> div id="center">img src="img.jpg" alt="Моя улюблена картинка" id="myImg" onLoad="small()">/div>
1212 / 909 / 270
Регистрация: 25.07.2009
Сообщений: 4,361
Записей в блоге: 5
Nazz, не подскажите, как обратиться к изображению не через масив изображений а через id ? У меня на форме гораздо больше изображений
WEB-developer
898 / 729 / 80
Регистрация: 12.03.2009
Сообщений: 2,804
Записей в блоге: 2
лутше обращайтесь через имена
form name="form1">img src="" name="myimg">/form>
document.form1.myimg.width
1212 / 909 / 270
Регистрация: 25.07.2009
Сообщений: 4,361
Записей в блоге: 5
Изменять достаточно только высоту либо ширину, картинка измениться относительно.
Добавлено через 41 секунду
а так можно:
document.all.myimg.width
WEB-developer
898 / 729 / 80
Регистрация: 12.03.2009
Сообщений: 2,804
Записей в блоге: 2
можно и так и так)) естли хотите изменить только один параметр, то можно изменить только высоту.
Добавлено через 39 секунд
точно не знаю. попробуйте, может и получится))
1212 / 909 / 270
Регистрация: 25.07.2009
Сообщений: 4,361
Записей в блоге: 5
вышло
дело, в том, что я раньше так делал, да вот год уже не занимался и все что я знал — на смарку..
WEB-developer
898 / 729 / 80
Регистрация: 12.03.2009
Сообщений: 2,804
Записей в блоге: 2
1212 / 909 / 270
Регистрация: 25.07.2009
Сообщений: 4,361
Записей в блоге: 5
Nazz, можете напомнить как завести масивчик для имен файлов, что-бы сделать «мини-галерею»?
WEB-developer
898 / 729 / 80
Регистрация: 12.03.2009
Сообщений: 2,804
Записей в блоге: 2
можно зделать так:
1 2 3 4 5
var i; var n= //количество изображений for(i=1;in;i++) eval('document.form1.myimg'+i+'.visibility="visible"'); }
1212 / 909 / 270
Регистрация: 25.07.2009
Сообщений: 4,361
Записей в блоге: 5
Сейчас разберусь с CSS покажу более детально что именно я пытаюсь зделать, но суть в том, что при клике на картунку изменьть ее URL на следующий в очереди.
Для хочу завести масив, который отвечает за имена переменный, и при щелчке на картинке увеличить индекс по которому берется имя картинки типа:
1 2 3 4
var i = 0, n = 20; var mas = ["begin.jpg", "someImg.jpg",. ,"end.jpg"];//масив с именами i = (i+1)%n; eval("document.all.myImg.src="+mas[i]);
но для этого переменная-индекс должна быть статической на все время выполнения программы
WEB-developer
898 / 729 / 80
Регистрация: 12.03.2009
Сообщений: 2,804
Записей в блоге: 2
вот посмотрите готовый код. Только здесь при клике на соответствующую кнопочку изменяется изображение
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
html> head> title> Заміна зображень з їх попереднім завантаженням /title> script type="text/javascript" language="javascript"> imgslide=new Array(); imgslide[0]=new Image(); imgslide[1]=new Image(); imgslide[2]=new Image(); imgslide[3]=new Image(); imgslide[0].src="https://www.cyberforum.ru/html/1.jpg"; imgslide[1].src="https://www.cyberforum.ru/html/2.jpg"; imgslide[2].src="https://www.cyberforum.ru/html/3.jpg"; imgslide[3].src="https://www.cyberforum.ru/html/4.jpg"; numimg=0; numimg1=3; function go() < document.form1.img.src=imgslide[numimg].src; numimg++; if (numimg==4) numimg=0; >//=========================================================================== function back() < document.form1.img.src=imgslide[numimg1].src; numimg1--; if (numimg1==0) numimg1=3; >/script> /head> body bgcolor="#00ffff"> form name="form1"> img src="5.jpg" name="img" width="200" height="200" border="1">/center> br/> input type="button" value="Вперед" onclick="go()"> input type="button" value="Назад" onclick="back()"> /center> /form> /body> /html>
1212 / 909 / 270
Регистрация: 25.07.2009
Сообщений: 4,361
Записей в блоге: 5
Часть страницы
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
div class="text"> h3>Доброго дня!/h3> p>Ви знаходитесь на домашній сторінці Ковтуна Руслана Олександровича. Якщо ви вважаєте, що не знайомі з цією людиною багано покинути дану сторінку./p> p>Тим хто вирішим дізнатись про мене більше інформації: читайте нижче../p> h3>Декілька слів про себе/h3> h3>Фотогалерея/h3> p>Для того, щоб переглянути всі фотокартки користуйтесь книпками переходу/p> img src="\images\1.jpg" alt="Натисніть для перегляду наступної світлини" name="myImg" style="clear:both;" width="535px" onClick="next()"> input type="button" value="Наступна" style="float:left" onClick="next()"> input type="button" value="Попередня" style="float:right" onClick="prev()"> div style="clear:both"> /div> h3>Контактна інформація/h3> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
var now = 0, n = 5; var mas = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"]; function next() { n++; if (n == 5) n = 0; document.all.myImg.src = "F:\VNTU\Robocha_Profesija\LABY_VCE_09\lab 42\images\" + mas[now]; alert("Was action next"); > function prev() n--; if (!n) n = 4; document.all.myImg.src = "F:\VNTU\Robocha_Profesija\LABY_VCE_09\lab 42\images\" + mas[now]; alert("Was action prev"); >
Добавлено через 1 минуту
все понял, мне форум помог, точнее подсветка систаксиса вспомнил о экранирующих символах