Я новичок в программировании и нуждаюсь в помощи.
Я создаю адаптивный сайт и застрял с изображением заголовка. На десктопе выглядит нормально. Когда я перехожу на мобильный, мне нравится его размер, но изображение вырывается из контейнера и показывает горизонтальную полосу прокрутки. Я попробовал (overflow-x: hidden;), который скрыл полосу прокрутки, но в итоге испортил изображение в мобильном представлении.
Затем я дал контейнеру изображения ширину 100%, и он идеально помещается на экране без горизонтальной полосы, но изображение слишком маленькое.
Мне было интересно, как я могу сделать так, чтобы изображение оставалось таким же, но помещалось в контейнер?
Я приложил изображение, чтобы пояснить, о чем я говорю. Спасибо!
если вы используете фоновое изображение, используйте эти правила CSS, чтобы сохранить единообразие для всех изображений
div {
overflow-x: hidden;
}
div.img {
background-position: center; // or give top center based on your need
}
Я думаю, что 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 со скрытым переполнением
Вы можете использовать srcset html-код. Все очень просто.
<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">
Пожалуйста, объясните роль src
, srcset
и sizes
(или дайте ссылки на документы), чтобы автор вопроса мог лучше понять, почему ваш ответ полезен.
Вам нужно где-то установить переполнение-x: скрыто;, но без вашего кода невозможно сказать вам, где.