пишу слайдер, взял картинки из интернета, соответственно разные размеры у них, я уменьшаю их, ставлю свойства width = 400px, height = auto, так не теряется качество, естественно что разного размера картинки, разная высота, а вот можно как-то сделать так, что бы высота и ширина была одинаковая, но при этом не терялось качество изображения?
2 ответа
Кроме предложенного варианта с жесткой задачей размеров можно использовать новое свойство aspect-ratio, оно уже поддерживается всеми современными браузерами:
.img_container {
display: flex;
gap: 10px;
}
.imgg {
width: 100px;
aspect-ratio: 1; /* Квадрат */
object-fit: cover;
}
<div class="img_container">
<img src="https://avatars.mds.yandex.net/i?id=3371c45886ba7b9626277725061c98c9_l-5644585-images-thumbs&n=27&h=384&w=480" class="imgg" alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLp6Gnj3rL0zQ-MTA-i0GGyTU3ck-LvaRljEMg-dhBwWZSZiWoOzBj44qbbfZFWxQkRSs&usqp=CAU" class="imgg" alt="">
<img src="https://ulibky.ru/wp-content/uploads/2021/03/kartinki_na_telefon_4_19121336.jpg" class="imgg" alt="">
</div>
.img_container { overflow: hidden; width: 480px;}
.img_container .imgg { float: left; margin-right: 10px; margin-bottom: 10px;}
.img_container img { width: 150px; height: 150px; object-fit: cover; }
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="img_container">
<img src="https://avatars.mds.yandex.net/i?id=3371c45886ba7b9626277725061c98c9_l-5644585-images-thumbs&n=27&h=384&w=480" class="imgg" alt="">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLp6Gnj3rL0zQ-MTA-i0GGyTU3ck-LvaRljEMg-dhBwWZSZiWoOzBj44qbbfZFWxQkRSs&usqp=CAU" class="imgg" alt="">
<img src="https://ulibky.ru/wp-content/uploads/2021/03/kartinki_na_telefon_4_19121336.jpg" class="imgg" alt="">
</div>
</body>
</html>
нужные пропорций картинок за счет object-fit: cover;