Сделать чтобы изображение в резиновой колонке отображалось полностью вне зависимости от ее ширины.

Картинка центрируется, при малом разрешении шкалируется.

Чтобы этого добиться надо картинке задать max-width:100%; и не указывать width и height

Изменяйте размер окна браузера с помощью растягивания/сужения размера или меняйте масштаб с помощью Ctrl+"+" / Ctrl+"-".

Исходный код этого примера:

<style>
.wrapper{
	text-align: center;
}
.wrapper img{
	max-width: 100%;
}
</style>

<h1>Изображение в 100%</h1>
<p>Сделать чтобы изображение в резиновой колонке отображалось полностью вне зависимости от ее ширины.</p>
<p>Картинка центрируется, при малом разрешении шкалируется.</p>
<p>Чтобы этого добиться надо картинке задать max-width:100%; и не указывать width и height</p>

<div class="wrapper">
	<img src="http://kdg.htmlweb.ru/photo/armenia/dscf5940.jpg" alt="">
</div>

Добавлено: 11 Июля 2018 08:23:20 Добавил: Андрей Ковальчук Нравится 0

Добавить