Запазване на съотношението на изображението при преоразмеряване - височина: 100%;

Направих шаблон, който се изобразява според очакванията, идва с различни таблици със стилове, за да бъде отзивчив.

Над 910px имам фиксирано изображение, което заема 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
Когато вашият прозорец е над 910px, уебсайтът трябва да се визуализира като на тази екранна снимка (bettercheckthekids.com/pirlo/ img/pirlo.png). Изображението, за което говоря, е това на футболиста отляво. - person cfocket; 14.01.2014