1

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

2 ответа 2

1

Кроме предложенного варианта с жесткой задачей размеров можно использовать новое свойство 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>

2
  • Тоже буду иметь ввиду! Спасибо!
    – 1001001
    18 фев 2022 в 20:52
  • Спасибо большое!
    – Mr Vi
    20 фев 2022 в 14:30
0

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

исходные размеры: введите сюда описание изображения

1
  • спасибо большое, выручили!)
    – Mr Vi
    18 фев 2022 в 10:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.