Увеличьте высоту изображения, не растягивая его

Question

У меня есть слайд изображений, которые имеют ширину 100%. Изображения 1600x380. Проблема в том, что при тестировании мобильного формата изображение имеет небольшую высоту. Мне нужно, чтобы высота была выше только в мобильном телефоне.

Я попытался установить высоту и ширину, но это показывает мне растянутое изображение.

Как увеличить высоту изображения, не растягивая его? Мне приходит в голову, чтобы увеличить изображение

Answer 1

Используйте @ media query , чтобы определить, когда пользователь использует мобильное устройство (или экран меньшего размера, здесь можно найти больше информации: https://www.w3schools.com/css/css_rwd_mediaqueries.asp). А затем просто установить width свойство изображения для авто . Надеюсь, это то, что вы искали.

Answer 2

Или так, как фон

.img {
  width: 100%;
  height: 380px;
  background-size: cover;
  background-position: center;
  display:block;
  background-image: url('http://www.canalvie.com/polopoly_fs/1.1805232.1467990211!/image/chat-siamois.jpg_gen/derivatives/cvlandscape_670_377/chat-siamois.jpg');
}

<div class="img"></div>

Answer 3

Используйте Подгонка объекта , например:

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

https://jsfiddle.net/x2qrc5un/