Отзывчивый веб-дизайн и изменение размеров изображений

Repsonsive веб-дизайн отлично работает на большинстве элементов html, за исключением изображений. Я считаю, что это беспорядок. При изменении размера видовых экранов вы не можете использовать процент изменения размера изображения, так как он будет иметь правильную ширину и высоту родительского элемента. Вам нужно установить фиксированные ширины и высоты для изображений... Или я что-то не хватает?

Итак, как именно вы делаете отзывчивый дизайн с участием изображений, чей контейнерный элемент/родитель будет растягиваться выше его собственной ширины и сжиматься ниже его собственной ширины?

Спасибо

Ответ 1

Проделанная вещь в отзывчивом дизайне - это установить это в вашем CSS для изображений и некоторых других элементов:

img, embed, object, video {
max-width:100%;
    height:auto;
}

Затем в вашем html изображение просто занимает размер контейнера.

Вы не устанавливаете размер изображения, который вы просто позволяете ему расти/сокращаться.

Ответ 2

Хорошо - вы можете написать:.selector img {width: 100%; height: auto;}, а затем используйте размер div, в котором он находится, чтобы определить масштаб. или вы также можете установить изображение в качестве фона и использовать аналогичные методы и, возможно, даже повесить с фоном-размер: обложка. я сделаю jsfiddle...

.image-w img {
  display: block;
  width: 100%;
  height: auto;
}

Ответ 3

Что я сделал на своем сайте, это:

материал страницы....

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, чтобы они отличались от основного текста.