Делаете веб-сайт адаптивным, но изображение выходит слишком маленьким?

Я новичок в программировании и нуждаюсь в помощи.

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

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

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

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

Делаете веб-сайт адаптивным, но изображение выходит слишком маленьким?

Вам нужно где-то установить переполнение-x: скрыто;, но без вашего кода невозможно сказать вам, где.

Gerard 31.10.2018 09:11
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
1
596
3

Ответы 3

если вы используете фоновое изображение, используйте эти правила 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 (или дайте ссылки на документы), чтобы автор вопроса мог лучше понять, почему ваш ответ полезен.

Dimitri De Franciscis 31.10.2018 14:35

Другие вопросы по теме