Сохранить соотношение изображений при изменении размера - высота: 100%;

Я сделал шаблон, который отображается, как и ожидалось, он поставляется с различными таблицами стилей, чтобы быть отзывчивым.

Более 910px у меня есть фиксированный img, который занимает 100% окна по высоте и имеет ширину: auto;. При загрузке изображение всегда имеет хорошие пропорции, но при уменьшении масштаба (снизу) оно искажается.

Ширина остается прежней и не уменьшается.

Есть ли способ заставить изображение сохранить исходное соотношение?

Вот шаблон: http://bettercheckthekids.com/pirlo/index.html


image scale jquery responsive-design
person cfocket    schedule 14.01.2014    source источник
comment
попробуйте удалить width:auto;.   -  person Jai    schedule 14.01.2014

Ответы (1)


arrow_upward
1
arrow_downward

Решение 1. Вы можете попробовать:

 img {
 width:  image height in pixels here;
 height: auto;
}

Решение 2. Если изображение находится внутри родительского блока div, вы можете попробовать:

<div id="wrap"><img src="test.png" /></div>

Учитывая приведенную выше разметку, вы затем используете эти правила:

#wrap {
height: 100px;
width: 100px;
}
#wrap img {
min-height: 100%;
min-width: 100%;
}
person Milind Anantwar    schedule 14.01.2014
comment
Привет, Милинд, ты проверил шаблон? Я не понимаю, как применять ваши решения, учитывая, как они настроены. Может я что-то упускаю? - person cfocket; 14.01.2014
comment
@cfocket: я не могу найти изображение в шаблоне, о котором вы говорите. Расскажи мне подробнее. - person Milind Anantwar; 14.01.2014
comment
Когда ваше окно превышает 910 пикселей, веб-сайт должен отображаться, как на этом снимке экрана (bettercheckthekids.com/pirlo/ img/pirlo.png). Изображение, о котором я говорю, это изображение футболиста слева. - person cfocket; 14.01.2014