Как img во весь div?

Question

[Егор Ильин]

есть div размером 1:1, 1:2, 2:1, 2:2, короче квадрат, большой квадрат, вертикальный блок и горизонтальный блок. Есть картинка непредсказуемого размера, т.е. может быть вертикальной, может горизонтальной. Картинка в этот div вставляется через img и надо сделать так, чтобы картинка уменьшалась/увеличивалась пропорционально до размеров div и заполняла его весь и центровалась. без полей по бокам или сверху снизу.
сделать это если картинку пихать из css бекграундом и background-size:cover; - получилось, но надо сделать через img

зы. бекграунд и background-size:cover не подходят ибо через js идет рендом картинки при загрузке и смена её по времени. хочется сделать красиво и элегантно.

благодарю и буду рад если поможете.

Answer 1

[Владимир Куликов]

Как заполнить блок картинкой без background?

img {
    width: 100%;
    height: 100%;
    object-fit: cover;	
}

Comments

[tana_y]

к этому
object-position: left top; или object-position: 50% 50%;
что позволяет работать с img как с backround-image, то есть передвигать ту часть картинки в поле видимости, которая нужна

Answer 2

[Lumore]

div {
text-align: -webkit-center;
}
img {
width: 100%;
}

Comments

[Егор Ильин]

Спасибо за ответ. если картинка горизонтальная то будут пустые полосы сверху и снизу.

[Ruslan04071996]

Спасибо , помогло

Answer 3

[lnked]

с помощью такого трюка можно такое реализовать
aspect ratio

<div class="ratio_image ratio_image_1x1">
		<img src="http://lorempixel.com/500/500/" alt="">
	</div>

	<div class="ratio_image ratio_image_1x2">
		<img src="http://lorempixel.com/500/500/" alt="">
	</div>

	<div class="ratio_image ratio_image_2x1">
		<img src="http://lorempixel.com/500/500/" alt="">
	</div>

	<div class="ratio_image ratio_image_2x2">
		<img src="http://lorempixel.com/500/500/" alt="">
	</div>

.ratio_image {
	width: 300px;
	height: 300px;
	float: left;
	margin: 20px;
	position: relative;
	overflow: hidden;
}

.ratio_image:before {
	width: 100%;
    display: block;
    content: "";
}

.ratio_image img {
	min-width: 100%;
	min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.ratio_image_2x1 {
	width: 600px;
}

.ratio_image_1x2,
.ratio_image_2x2 {
	height: 600px;
}

.ratio_image img {
	width: 100%;
}

.ratio_image_1x1:before {
    padding-top: 100%; /* (300 / 300) * 100%; */
}

.ratio_image_2x1:before {
    padding-top: 200%; /* (600 / 300) * 100%; */
}

.ratio_image_1x2:before {
    padding-top: 50%; /* (300 / 600) * 100%; */
}

.ratio_image_2x2:before {
    padding-top: 100%; /* (600 / 600) * 100%; */
}

Comments

[Егор Ильин]

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

[lnked]

Егор Ильин: Отредактирвоал ответ выглядит как то так take.ms/k9kAd

[Егор Ильин]

Эдик: спасибо. попробовал. картинка конечно заполняет весь блок по вашему решению, но пропорции то искажаются, а это не допустимо

[lnked]

Егор Ильин: картинка может обрезаться по какой либо стороне либо по х либо по у я в примере не совсем правильно сделал, пример только для примера)) что бы показать приблизительно как это работает этот метод можно довести до состояния похожего на bgz cover

[Никита Сергеевич]

Мужик, пользуюсь теперь часто твоим способом, благодарочка)

Answer 4

[Mr Crabbz]

зы. бекграунд и background-size:cover не подходят ибо через js идет рендом картинки при загрузке и смена её по времени.

в чем проблема через js добавлять inline-стиль style="background-image:...." ?

Comments

[Егор Ильин]

спасибо за ответ! сильно сложная схема получается. тогда надо будет при добавлении каждой новой публикации менять и css и html и js еще/ это тумач. обновил картинку в вопросе чтобы наглядно было.

Answer 5

[ivankalita]

Егор Ильин, Привет, ты так и не нашел ответ на свой вопрос?))

Answer 6

[tastytim]

.image {
background: url("../img/banner.jpg");
width: 100%;
height: 100%;
position:absolute;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}