Как запретить сайту показ обрезанного изображения на телефоне?

Question

У меня идеальный сайт на рабочем столе.

doc.awsri.com

Но на телефоне это выглядело обрезанным.

Как настроить CSS, чтобы этого не происходило?

<div class="col-md-3 margin30">
    <div class="default-wrap wow animated fadeInDown animated" style="visibility: visible; animation-name: fadeInDown;">
        <div class="img">
            <img src="http://doc.awsri.com/uploads/client/1545150130__FB_IMG_1545145675717 (2).jpg" class="img-responsive" alt="">
        </div><!--person image-->
        <div class="description">
            <h4>The man</h4>
            <span>ready to go</span>
        </div><!--desrciption-->
    </div><!--default-wrap-->
</div>

Это потому, что я установил эту фиксированную высоту 200px?

.process-box a img, .default-wrap .img img {
    object-fit: cover;
    height: 200px;
    width: 100%;
}

Должен ли я удалить его?

Answer 1

Я вижу, вы css на живом сайте и думаю, что вы должны внести некоторые изменения с css, как показано ниже

http://doc.awsri.com/client/css/style.css

.default-wrap .img {
    /* height: 200px; */
}

.process-box a img, .default-wrap .img img {
    /* object-fit: cover; */
    height: auto;
    width: 100%;
}

Answer 2

Я вижу, что проблема с изображением начинается с ширины 991 пикселей, поэтому.Вам нужно будет создать медиа-запрос к вашему CSS-файлу, как показано ниже, если вы хотите сохранить высоту ваших изображений 200px.

@media screen and (max-width: 991px) {
  .process-box a img, .default-wrap .img img {
      object-fit: contain;
  }
}

Если вы хотите сохранить ширину фотографий 100% и потерятьвысотой 200px вам нужно будет вставить код ниже.

@media screen and (max-width: 991px) {
    .default-wrap .img {
          height: auto;
    }
    .process-box a img, .default-wrap .img img {
          height: auto;
    }
 }