@Snewer

Как сделать квадратный блок и добавить в него изображение?

Здравствуйте!
Имеется код:
<div>
   <img>
</div>


Как сделать блок квадратным (ширина резиновая. нужно что бы высота была равна ширине) и выровнять изображение в нем по центру? (изображение может быть "высоким" и "широким". нужно ограничивать размер размером блока и выравнивать остальную часть)

Спасибо.
  • Вопрос задан
  • 1636 просмотров
Пригласить эксперта
Ответы на вопрос 3
Может так?
<style>
.square {
width:50%;
height:50%;
}
.center {
width:50%
margin:25%;
}
</style>
<div class = "square">
   <img class = "center">
</div>
Ответ написан
aliencash
@aliencash
Партизан
Ответ написан
Комментировать
@Kjuri
<style>
.container {
	width: 500px;
}
.block {
	width: 100%;
	height:0;
	padding: 0 0 100%;
	position:relative;
}
img {
	position:absolute;
	width:100%;
	height:100%;
}
</style>

<div class="container">

	<div class="block">
		<img src="http://3.bp.blogspot.com/-DJygMmyuo4k/Vgzs5hRNj9I/AAAAAAAAgNw/DJWBjrtBKjo/s1920/manzarali-duvar-kagitlari-2016-indir-14.jpg" alt="">
	</div>

</div>


codepen.io/anon/pen/ryjaKE

Естественно container может быть любой ширины, хоть 100%
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы