Как остановить фоновое изображение от сжатия при изменении размера

Question

Так что у меня есть div с фоновым изображением с размером фона, установленным для покрытия.Вот код div:

.imgContainer {
  width: 400px;
  height: 340px;
  z-index: 1;
  border: 0;
  background: url('https://dummyimage.com/800x680/ccc/333');
  background-position: 50% 25%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  border-radius: .25rem;
}

@media screen and (max-width:650px) {
  .imgContainer {
    width: 100% !important;
  }
}

<div class="imgContainer"></div>

Фон полностью отображает изображение, но, поскольку я делаю свой сайт отзывчивым, я изменяю div на ширине 650px, используя правило @media.

@media screen and (max-width:650px){
  .imgContainer {
    width: 100% !important;
  }
}

При увеличении div фоновое изображение расширяется и не отображает много содержимого изображения.Содержимое изображения отображается полностью, когда ширина составляет 400 пикселей, а высота - 340 пикселей.Проблема возникает, когда ширина div равна 100%, а содержимое изображения не отображается так же, как при ширине 400 пикселей.Как это исправить?И заранее спасибо!

Answer 1

Это может помочь.Примечание: это работает, только если изображение имеет соотношение сторон 400: 340 (например, 800 x 680, 600 x 510 и т. Д.) Примечание: 418 пикселей в последнем медиазапросе - это эмпирическое значение, основанное на текущих отступах иполе.Возможно, вам понадобится другое значение.

Вот кодекс, который можно увидеть в действии

.imgContainer {
  width: 400px;
  height: 340px;
  z-index: 1;
  border: 0;
  background: url("https://dummyimage.com/800x680/ccc/333");
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: cover;
  border-radius: 0.25rem;
}

@media screen and (max-width: 650px) {
  .imgContainer {
    width: 100% !important;
    background-size: contain;
  }
}

@media screen and (max-width: 418px) {
  .imgContainer {
    background-size: cover;
  }
}

<div class="imgContainer"></div>

Answer 2

С помощью background-size: cover вы сообщаете браузеру, что изображение должно охватывать весь элемент при сохранении исходного соотношения сторон изображения.Таким образом, следует ожидать, что изменение соотношения сторон элемента HTML отрежет часть изображения, чтобы это произошло.

Чтобы сделать ваше изображение отзывчивым, вы должны убедиться, что аспектсоотношение вашего изображения остается неизменным.

Один из способов сделать это - использовать что-то вроде следующего:

@media screen and (max-width:650px) {
    .imgContainer {
        width: 100%;
        padding-bottom: 85%;
        height: auto;
    }
}

Это установит отступ в 85% от шириныelement as 100 / (400/340) = 85. Если в вашем div больше ничего нет, это даст ему соответствующее соотношение сторон для вашего изображения.