как сделать баннер отзывчивым и масштабируются - не используя свойства фона

Question

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

<div class="banner"> 
    <img src="/img/banner1.png" alt="Banner"> 
</div> 

I знать с помощью css мы можем сделать фоновое изображение изображения для баннера класса. Но возможно ли иметь эффект

background-position, background-size 

с вышеуказанной структурой.

Answer 1

Удалить img попробовать добавить этот CSS к вашему .banner:

.banner { 
    background-image: url('/img/banner1.png'); 
    background-repeat: no-repeat; 
    background-position: center; 
    background-size: cover; 
} 

Answer 2

Попробуйте добавить следующий класс к изображению:

<img src="/img/banner1.png" width="460" height="345" class="responsive"> 

CSS:

.responsive { 
    width: 100%; 
    height: auto; 
} 

также. .. Замените атрибуты ширины и высоты на размер banner1.png.

Отдельное примечание, если вы не знаете о Bootstrap, ознакомьтесь с их реактивной платформой, простым классом «img-отзывчивый», сделайте все изображения чувствительными.