Размер картинка без изменения качества

Question

пишу слайдер, взял картинки из интернета, соответственно разные размеры у них, я уменьшаю их, ставлю свойства width = 400px, height = auto, так не теряется качество, естественно что разного размера картинки, разная высота, а вот можно как-то сделать так, что бы высота и ширина была одинаковая, но при этом не терялось качество изображения?

Answer 1

.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;

исходные размеры:

Answer 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>

БЛОГ НА HUSL

Размер картинка без изменения качества

Ответы (2 шт):