Создание адаптивного изображения - PullRequest
Новая
       13

Создание адаптивного изображения

0 голосов
/ 26 октября 2019

Я пытаюсь сделать свое изображение логотипа отзывчивым на своей странице. Я использовал созданный адаптивный класс и в таблице стилей установил ширину этого класса max-width 100%, но изображение все еще не масштабируется при изменении размера браузера.

HTML part: 

<div align="center" class="div3">
    <img src="http://www.revolutionvinyl.net/rvgglitch.gif" width="700" 
    height="700" class="responsive" alt="RVG Logo"> 
</div>

CSS часть: 

.responsive {
    max-width: 100%;
    display: block; 
    height: auto;
}

Заранее спасибо! Этот сайт сводит меня с ума, так что это исправление очень поможет.

1 Ответ

0 голосов
/ 26 октября 2019

Вы устанавливаете явную жесткую ширину 700px на img, что сводит на нет то, к чему вы стремились с max-width: 100%. Если вы хотите, чтобы изображение продолжало масштабироваться, но не за пределами области просмотра, попробуйте вместо этого: 

.responsive {
  width: 100%;
  max-width: 100%;
  display: block;
  height: auto;
}
<div align="center" class="div3"><img src="http://www.revolutionvinyl.net/rvgglitch.gif" class="responsive" alt="RVG Logo"> </div>

jsFiddle

...