Jump to content
Уважаемые пользователи! Сайт находится ещё в режиме разработки, но большая часть функционала уже доступна! ×

Картинки (изображения) в строке (ряду) одной высоты css используя object-fit.


Печенег

136 views

 Share
Followers 0

Есть 4 картинки разного размера:

 

Screenshot_180.jpg

HTML

<div class="row img-gallery">	    																		
    <div class="col-md-3 col-12">
    	<img src="img-1.webp" alt="Картинка 1" />
    </div>
    <div class="col-md-3 col-12">
    	<img src="img-2.webp" alt="Картинка 2" />
    </div>
    <div class="col-md-3 col-12">
    	<img src="img-3.webp" alt="Картинка 3" />
    </div>
    <div class="col-md-3 col-12">
    	<img src="img-4.webp" alt="Картинка 4" />
    </div>
</div>

CSS

.img-gallery div {
	overflow: hidden;
	height: 200px;
}
.img-gallery img {
	width: 100%; height: 100%; object-fit: cover;
}

Получаем:

Screenshot_181.jpg

Свойство object-fit имеет несколько значений:

object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;

наглядно можно посмотреть по ссылке https://developer.mozilla.org/ru/docs/Web/CSS/object-fit

 Share

0 Comments


Recommended Comments

There are no comments to display.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

General chat

Please enter your display name

×
×
  • Create New...

Important Information

Продолжая использовать Веб-сайт ostogramm.ru Вы автоматически соглашаетесь с Privacy Policy и Guidelines, в ином случаи просто покиньте его.