Как сделать картинку адаптивной, само растягивающейся к размеру монитора, чтобы размер баннера изменялся сам - подстраивался под дизайн сайта - HTML и CSS

Alar · 24.12.2019, 08:29

Код:

<style type="text/css">

.css-adaptive {
display: block;
max-width: 100%;
height: auto;
}

</style>

<img src="https://programmersforum.ru/kartinka.gif" class="css-adaptive">

Arigato · 24.12.2019, 11:56

Непонятно, что нужно. Проверил, картинка и так заполняет собой весь div с автоматическим масштабированием:

Код:

<!DOCTYPE html>
<html>
	<head>
	<style type="text/css">
		.css-adaptive {
			display: block;
			max-width: 100%;
			height: auto;
		}
	</style>
</head>
	<body>
		<div style="width: 800px; height: 600px;">
			<img src="1.jpg" class="css-adaptive">
		</div>
	</body>
</html>

Alar · 24.12.2019, 12:46

Так это просто тема вопрос-ответ.
Решение в первом посте рабочее, оставил для архива.

Arigato · 24.12.2019, 12:52

Во многих случаях под картинку лучше использовать не тег img, а background.

Лубышев · 30.12.2019, 11:20

Цитата:

Сообщение от Arigato

Во многих случаях под картинку лучше использовать не тег img, а background.

в корне не согласен с этим. background это лишь стилистика внешнего вида, но не имеет ни какого синтаксического значения. если после удаления css стилистики, содержательная часть документа страдает, то вы сделали не верно. то есть, если картинка имеет какую то смысловую нагрузку в контенте, то она должна быть именно картинкой с alt и title

Arigato · 30.12.2019, 14:21

Цитата:

Сообщение от Лубышев

если картинка имеет какую то смысловую нагрузку в контенте, то она должна быть именно картинкой с alt и title

А где в теме сказано про наличие смысловой нагрузки?

Лубышев · 07.01.2020, 03:53

Цитата:

Сообщение от Arigato

Во многих случаях под картинку лучше использовать не тег img, а background.

Ну в таком случае можно и Canvas)))

Цитата:

Сообщение от Arigato

А где в теме сказано про наличие смысловой нагрузки?

а где в теме написано про бекграунд? Написано "картинка" в html есть четкое определение, что такое картинка. А так то можно и canvas использовать, ни кто ж не осудит...

24.12.2019, 08:29	#1
Alar Александр Администратор Регистрация: 28.10.2006 Сообщений: 17,630	Как сделать картинку адаптивной, само растягивающейся к размеру монитора, чтобы размер баннера изменялся сам - подстраивался под дизайн сайта Код: `<style type="text/css"> .css-adaptive { display: block; max-width: 100%; height: auto; } </style> <img src="https://programmersforum.ru/kartinka.gif" class="css-adaptive">` Купить рекламу на форуме за 42 тыс руб за месяц размещения

24.12.2019, 11:56	#2
Arigato Высокая репутация СуперМодератор Регистрация: 27.07.2008 Сообщений: 15,813	Непонятно, что нужно. Проверил, картинка и так заполняет собой весь div с автоматическим масштабированием: Код: `<!DOCTYPE html> <html> <head> <style type="text/css"> .css-adaptive { display: block; max-width: 100%; height: auto; } </style> </head> <body> <div style="width: 800px; height: 600px;"> <img src="1.jpg" class="css-adaptive"> </div> </body> </html>` E-Mail: arigato.freelance@gmail.com

24.12.2019, 12:46	#3
Alar Александр Администратор Регистрация: 28.10.2006 Сообщений: 17,630	Так это просто тема вопрос-ответ. Решение в первом посте рабочее, оставил для архива. Купить рекламу на форуме за 42 тыс руб за месяц размещения

24.12.2019, 12:52	#4
Arigato Высокая репутация СуперМодератор Регистрация: 27.07.2008 Сообщений: 15,813	Во многих случаях под картинку лучше использовать не тег img, а background. E-Mail: arigato.freelance@gmail.com

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
как в css и html сделать разный дизайн сайта для телефонов и пк	pelemexa	HTML и CSS	32	23.08.2019 15:14
Какое свойство применить к div контейнеру чтобы он подстраивался под внутренние блоки?	tesla07	HTML и CSS	2	09.02.2015 13:24
Как сделать, чтобы когда наводишь курсором на картинку, она меняет цвет???	Proger16	HTML и CSS	2	19.07.2013 21:45
Как сделать,чтобы программа работала при низком разрешение монитора?	RomanDemidov	Общие вопросы Delphi	5	13.12.2010 19:10
Скажите как сделать так, чтобы размер формы оставался фиксированным?	Faramund	Помощь студентам	2	20.03.2007 20:14