Responsywny obraz maks. Wysokość 100% nie działa w firefox

Obecnie próbuję zmienić rozmiar obrazu w zależności od wymiarów przeglądarki. Udało mi się przekonwertować obrazek w poziomie, jeśli zmniejszy to okno przeglądarki, rozmiar obrazu zmieni się proporcjonalnie. Jednak gdy zmieniam rozmiar okna pionowo, Firefox po prostu nie chce tego robić! Kod jest dość prostaResponsywny obraz maks. Wysokość 100% nie działa w firefox

<body> 

    <div id="content"> 
     <img src="images/abc.jpg"> 
    </div>  

</body>

i CSS:

#content { 
    height: 100%; 
    padding: 50px; 
} 


#content img{ 
    max-height:100%; 
    max-width: 100%; 
}

Inną kwestią jest to, że obraz robi wydają się zmienić rozmiar pionowo w chromie, ale muszę przeciągnąć dno przeglądarce dobrze nad obrazem, zanim zacznie to robić. Wolałbym, aby obraz zaczął się składać, gdy tylko dolna zawartość dopełni "trafienie" dolnej części obrazu, że tak powiem. Mam nadzieję, że to ma sens.

Każda pomoc mile widziane

Źródło

2012-08-06 bestfriendsforever

można dostarczyć próbkę obrazu? Jakie wymiary ma 'abc.jpg'? – orique

Myślę, że wysokość #content prawdopodobnie będzie większa niż 100% od czasu używania dopełnienia. Zasadniczo dodaje 50 + 50 od góry i od dołu !!! Aby sprawdzić, możesz spróbować podać konkretną wysokość do ciała –

Ok, abc.jpg jest duża. dzięki czemu możesz zobaczyć tyle szczegółów na każdym ekranie, na którym go widzisz. Powiedzmy, że 1500 x 1000 px – bestfriendsforever

Ponieważ wysokość potencjalnie mogłyby trwać wiecznie, you cant ustawić wysokość niczym w stosunku do okna przeglądarki, aby być funkcją procent. Mówię tylko, że będziesz musiał umieścić go w czymś o stałej wysokości, aby użyć wartości procentowej. Powodzenia!

-b

Źródło

2012-08-06 15:20:37 OneChillDude

OK, dzięki. Chociaż to pokonuje cel tego obrazu, ponieważ chciałbym go zmienić na wysokość i przeglądarkę, aby można było zmienić rozmiar przeglądarki w rodzaju "powiększania". Wydaje się, że działa dobrze na [tej stronie] (http://www.olivierhess.com/) – bestfriendsforever

pan tylko określony "max-height" i "max-width" właściwości. Jeśli nie określisz rzeczywistych właściwości "width" lub "height", obraz początkowo przyjmuje szerokość i wysokość jego fizycznych wymiarów (jeśli nie jest większa niż określona maksymalna wysokość i maksymalna szerokość).

Powiedział, że zachowanie, które zauważyłeś, jest poprawne. Odpowiedź jest taka, jak już wspomniano, aby określić również początkową szerokość lub wysokość, zależnie od tego, czy obraz jest portretowy czy krajobrazowy.

Źródło

2012-08-06 15:20:59 hotS85

spróbować tego, zaczerpnięte z Twitter bootstrap 2

html,body{height:100%;} 
#content {padding: 5%;} 
#content img { 
max-height: 100%;/* Part 1: Set a maxium relative to the parent */ 
width: auto\9; 
/* IE7-8 need help adjusting responsive images */ 
max-width: auto; 
/* Part 2: Scale the height according to the width, otherwise you get stretching */ 
vertical-align: middle; 
border: 0; 
-ms-interpolation-mode: bicubic; 
}

Źródło

2012-12-13 08:32:37

To nie wydaje się działać dla mnie. Czy możesz dostarczyć wersję demo? – KatieK

Czy that co chcesz?

Właśnie dodałem wysokość do html i body, aby wysokość #contents nie była wysoka.

body, html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
}

(A box-klejący: border-box do #content, ponieważ wydaje się, że chcesz tego)

Źródło

2012-12-13 08:43:04 dave

Responsywny obraz maks. Wysokość 100% nie działa w firefox

Odpowiedz

Powiązane problemy