Как в таком случае можно сделать адаптивное изображение?

Question

[kostyan_146]

<header>
			<div class="hdr", id="lftimg">
				<img src="../static/images/logo.png">
			</div>
			<div class="hdr", id="lft">
				<p>рэп и хип-хоп</p>
			</div>
			<div class="hdr", id="cntr">
				<a>ЛЕНТА</a>
				<a>ФОРУМ</a>
				<a>О ПРОЕКТЕ</a>
				<a>ДОНАТ</a>
			</div>
			<div class="hdr"; id="rght">
				<a color="">вход</a>
				<hr color="white">
				<a>регистрация</a>
			</div>
		</header>

*{
	background-color: #FAFD7D;
}

header * {
	border: 1px solid white;
}

header {
	display: flex;
	position: relative;
	background-color: #2D2D2F;
	width: 80%;
	margin-top:-0.5%;
	margin-left: 10%;
}

header a {
	text-decoration: none;
	color: white;
	background-color: #2D2D2F;
}

header p {
	background-color: #2D2D2F;
}

#lftimg{
	background-color: #2D2D2F;
	height: auto;
	width: 80%;
	max-width: 151px;
	margin-top: auto;
	margin-bottom: auto;
}

#lft { 
	width: 10%;
	height: auto;
	margin: auto;
}

#lft * {
	text-align: center;
}

#cntr {
	display: flex;
	border-right: 10px solid white; 
	border-left: 10px solid white;
	padding-bottom: 35px;
	padding-top: 35px;
	margin: auto;
	width: 60%;
	height: auto;
}

#cntr a{
	margin: 0 auto;
}

#rght { 
	line-height: 250%;
	text-align: center;
	overflow: hidden;
	margin: auto;
	margin-right: 0;
	padding-right: 2%;
	padding-left: 1%;
}

#rght * {
	margin: 0 auto;	
}

.hdr {
	display: inline-block;
	background-color: #2D2D2F;
	color: #FFFFFF;
	vertical-align: middle;
	font-size: 24px;
}

Comments

[MagicMight]

Выложите код на codepen.

[Ankhena]

Как в таком случае можно сделать адаптивное изображение?

Уточните, чем ваш случай отличается от всех остальных.

Адаптивные изображения делаются с помощью тега picture

[kostyan_146]

Ankhena, можете подробней про picture? А случай отличается тем, что везде пишут, что достаточно добавить width: 100% и height: auto, что у меня не работает

[Ankhena]

kostyan_146,

можете подробней про picture?

https://developer.mozilla.org/ru/docs/Web/HTML/Ele...

А случай отличается тем, что везде пишут, что достаточно добавить width: 100% и height: auto, что у меня не работает

Сделайте песочницу на jsfiddle.net

Проверьте ваш код валидатором, никаких запятых внутри тегов быть не должно.

И не используйте id для стилизации.

[Ankhena]

kostyan_146, И всё заработает https://jsfiddle.net/48yw6a9d/

[kostyan_146]

Ankhena, https://jsfiddle.net/dancool_5/nrvp28x7/9/

[kostyan_146]

Ankhena, а что использовать вместо id, если мне нужно применить теги к одному блоку?

[kostyan_146]

Ankhena, А как-то можно сделать, чтобы сначала уменьшалось изображение, а потом уже блок справа от него?

[ThunderCat]

kostyan_146,

а что использовать вместо id, если мне нужно применить теги к одному блоку?

задать ему уникальный класс? добавить уникальный аттрибут? хмм....

[Ankhena]

kostyan_146,

а что использовать вместо id, если мне нужно применить теги к одному блоку?

Один блок это один <тег>.
У тега могут быть атрибуты. <тег атрибут="" атрибут="">
class это атрибут.
Значений у одного атрибута может быть несколько, например:

<div class="class1 class2 class88">содержимое тега</div>

[Ankhena]

kostyan_146,

А как-то можно сделать, чтобы сначала уменьшалось изображение, а потом уже блок справа от него?

Использовать @media условия.

[Илья]

интересный код))