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

Question

[Snewer]

Здравствуйте!
Имеется код:

<div>
   <img>
</div>

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

Спасибо.

Answer 1

[Twelfth Doctor]

Может так?

<style>
.square {
width:50%;
height:50%;
}
.center {
width:50%
margin:25%;
}
</style>
<div class = "square">
   <img class = "center">
</div>

Comments

[Snewer]

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

Answer 2

[Андрей Федоров]

codepen.io/aliencash/pen/WpRbGd

Answer 3

[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%

Comments

[Ankhena]

Лишний div заменить на псевдоэлемент, будет симпатичнее

[Kjuri]

у картинки, псевдоэлемент?.... Оооо. Ну замените