Изображение не помещается на экране мобильного телефона

Question

Я недавно начал создавать сайты с начальной загрузкой и столкнулся с проблемой при создании http://en.arecotechnology.com/gunassembly.html

Когда экран свернут, фотография не помещается на экран.То же самое относится и к другим страницам сайта, включая http://en.arecotechnology.com/spe2018.html (изображение перекрывает текст, когда экран свернут)

Я пытался поиграться с div, но, похоже, ничего не работает.

Если кто-нибудь подскажет мне, что я должен делать, это будет с благодарностью!

Answer 1

Чтобы сделать <img> максимальной шириной родительского элемента, добавьте к изображениям класс img-responsive (Bootstrap 3) или img-fluid (Bootstrap 4).

<img class="img-fuid img-responsive" src="/images/my-image.jpg">

img-Response и Img-Fluid - это утилита Boostrap, которая добавляет max-width: 100%; и height: auto; к изображению.Этими двумя свойствами вы решаете большинство проблем с изображениями, не позволяя изображениям быть шире, чем их контейнер.Проверьте документацию Bootstrap, в ней много полезных классов.

И добавьте несколько медиазапросов или снова используйте помощники по загрузке медиазапросов.

Answer 2

Попробуйте это без , используя медиа-запрос в вашем файле CSS или теги стиля:

   img {
     max-width: 100%;
   }

Теоретически это должно работать, потому что оно становится 100% размера экрана (не 100% фактический размер).Таким образом, максимальная ширина будет просто растягиваться до 100% размера экрана вместо прокрутки.

Возможно, вам придется включить другие CSS, но этот код широко используется для сайтов на основе начальной загрузки в сочетании с другими свойствами.

Answer 3

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

Все, что я могу предоставить с данной информацией.Ссылки мертвы, 404, так же, как Fecosos ^^^

Попробуйте тоже с правилами медиа:

@media screen and (max-width:480px) {  
    .cupcake img {
        width: [insert desired with here for certain size];
    }
}