Создание адаптивного сайта, но изображение слишком маленькое?

Question

Я довольно новичок в кодировании и мне нужна помощь.

Я создаю адаптивный сайт и застрял в заголовке изображения. На рабочем столе выглядит нормально. Когда я перехожу на мобильник, мне нравится его размер, но изображение вырывается из контейнера и показывает горизонтальную полосу прокрутки. Я попытался (overflow-x: hidden;), чтобы скрыть полосу прокрутки, но в итоге это испортило изображение в мобильном представлении.

Затем я присвоил контейнеру изображения ширину 100%, и он идеально помещается на экран без горизонтальной полосы, но изображение слишком маленькое.

Мне было интересно, как сделать так, чтобы изображение оставалось таким же, но помещалось в контейнер?

Я приложил изображение, чтобы объяснить, о чем я говорю. Спасибо!

Answer 1

Я думаю, left: -50% может помочь центрировать изображение:

/* the div outside */
.mobile {
  border: 1px solid black;
  width: 500px; /*size of the mobile screen*/
  height:1500px;
  overflow-x: hidden;
}
/* bottle img */
.bottle{
  left: -50%;
  max-height: 100%;
  overflow: hidden;
  position: relative;
  background-position: center;
}

эффект в моем тесте:

И источник для дополнительной справки: Центрирование большого изображения неизвестного размера внутри меньшего элемента div со скрытым переполнением

Answer 2

Вы можете использовать hrml код srcset. Это довольно просто.

<img srcset="image.jpg 320w, image.jpg 480w, image.jpg 800w"
 sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
 src="image.jpg" alt="Image">

Answer 3

если вы используете фоновое изображение, то используйте эти правила CSS, чтобы сохранить согласованность для всех изображений

div {
    overflow-x: hidden;
}

div.img {
    background-position: center; // or give top center based on your need
}