Repsonsive веб-дизайн отлично работает на большинстве элементов html, за исключением изображений. Я считаю, что это беспорядок. При изменении размера видовых экранов вы не можете использовать процент изменения размера изображения, так как он будет иметь правильную ширину и высоту родительского элемента. Вам нужно установить фиксированные ширины и высоты для изображений... Или я что-то не хватает?
Итак, как именно вы делаете отзывчивый дизайн с участием изображений, чей контейнерный элемент/родитель будет растягиваться выше его собственной ширины и сжиматься ниже его собственной ширины?
Спасибо
Проделанная вещь в отзывчивом дизайне - это установить это в вашем CSS для изображений и некоторых других элементов:
img, embed, object, video {
max-width:100%;
height:auto;
}
Затем в вашем html изображение просто занимает размер контейнера.
Вы не устанавливаете размер изображения, который вы просто позволяете ему расти/сокращаться.
Хорошо - вы можете написать:.selector img {width: 100%; height: auto;}, а затем используйте размер div, в котором он находится, чтобы определить масштаб. или вы также можете установить изображение в качестве фона и использовать аналогичные методы и, возможно, даже повесить с фоном-размер: обложка. я сделаю jsfiddle...
.image-w img {
display: block;
width: 100%;
height: auto;
}
Что я сделал на своем сайте, это:
материал страницы....
div class=picr>
img src="/Images/Home/MountainPine.jpg" alt="Mountain Pine" id="mountainpine" >
<p>Caption about mountain pine</p>
/div>
Затем в CSS
pic, pic6 {
float: left;
}
...
.pic, .picr {
width: 37%;
}
#content img {
width: 100% ;
}
Итак, класс div стилизован, и изображение настроено на его заполнение. Используя div, я также могу стилизовать
внутри классов .pic, чтобы они отличались от основного текста.