Мобильное дружелюбное изображение

Question

У меня есть изображение, которое также является ссылкой в ​​верхней части моего веб-сайта, например баннер, и когда я захожу на мобильный телефон, чтобы посмотреть его, оно остается того же размера.Как сделать его меньше для мобильных устройств?

Answer 1

Пожалуйста, убедитесь, что у вас есть следующий тег на вашей веб-странице

<meta name="viewport" content="width=device-width, initial-scale=1.0">

, а затем добавьте изображение следующим образом

<img src="your image path" alt="" class="heroImage">
    <style>
        .heroImage{width: 100%;max-width: 100%;}
    </style>

Answer 2

Добавьте медиазапросы к вашему коду, например:

@media screen and (max-width: 600px) {
  #logo{
       width: 100%;
       height: auto;
       //in case you want a max-width-> max-width: 200px;
  }
}

Answer 3

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

 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

Answer 4

 1. Use Bootstrap js and Bootstrap CSS in that use media queries according to 
    screen 
 2. width do the coding or use class xs sm md lg.

# Mobile
only screen and (min-width: 480px)

# Tablet
only screen and (min-width: 768px) 

# Desktop
only screen and (min-width: 992px)

# Huge
only screen and (min-width: 1280px) 

Answer 5

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

Так, например, если у вашего изображения был класс 'my-img'

.my-img {

  width:100%;
  max-width:600px;
  height:auto;

}

Или, если вы хотите сделать это inline

<img src="" class="my-img" style="width:100%;max-width:600px;height:auto" />