rezerwowanie miejsca w układzie przeglądarki dla obrazów responsywnych (zapobieganie ponownemu przepływie)

Question

Wprowadzam zmiany, aby moja strona była bardziej responsywna i ogólnie rzecz biorąc, wszystko poszło dobrze. Jednak natknąłem się na jeden problem:

Przedtem zawsze używałam atrybutów wysokości i szerokości na elementach img, aby zarezerwować przestrzeń w układzie dla obrazów, podczas gdy przeglądarka je ładuje. Zapobiega to układowi z szarpiąc się, gdy przeglądarka ładuje i oblicza potrzebne miejsce na obraz.

Jednak po poprawieniu czułości zdjęć, używając max-width: 100% i usuwania atrybutów wysokości i szerokości, przeglądarka nie rezerwuje już miejsca na obraz (ponieważ nie wie już, jak wysoki lub szeroki będzie obraz z góry, ponieważ nie mogłem tego wyraźnie powiedzieć)

Moim celem jest posiadanie responsywnych obrazów, które zajmą również odpowiednie miejsce w układzie strony po pierwszym załadowaniu. Czy ktoś wie o takim rozwiązaniu?

* EDYCJA (ROZWIĄZANIE) - this is the best article I have found on the topic. Ładne podejście!

Answer 1

Prawidłowa odpowiedź tutaj jest zapobieganie reflow pionowej za pomocą "padding-bottom trick". Aby ta technika działała, musisz znać proporcje obrazu z góry.

Dzięki Anders M. Andersona do wysyłania doskonały artykuł na ten temat: http://andmag.se/2012/10/responsive-images-how-to-prevent-reflow/

Answer 2

Nie wziąłbym atrybutów wysokości i szerokości, po prostu spróbuj ustawić je na auto.

Answer 3

Oto sposób na zrobienie tego. To nie jest niesamowite, ale działa. http://jsfiddle.net/78Lvc/11/

zmieniłem tag obrazu, aby wyglądać tak:

<img src="http://fitzgeraldmedia.net/images/range1.jpg" id="img" imgWidth="467" imgHeight="700" onload="fixMyWidth()"/> 

zauważysz, że dodałem pewne atrybuty i onload. Będziesz musiał dodać atrybuty w kodzie lub ręcznie. Powodem potrzeby jest wysokość i szerokość, ponieważ musisz znać wysokość obrazu, aby obliczyć wymaganą ilość miejsca w JS.

Następnie inline, mam ten kod:

<script> 
    //get the width of the browser right now 
    var containerWidth = document.body.offsetWidth; 
    //get the attributes that we have specified for this image 
    var imgWidth = document.getElementById("img").getAttribute("imgWidth"); 
    var imgHeight = document.getElementById("img").getAttribute("imgHeight"); 

    //since the img is to be 50% of the container width 
    var widthRatio = containerWidth/imgWidth/2 ; 

    //now set the height of the image 
    document.getElementById("img").style.height = (imgHeight * widthRatio) + "px"; 

    //once the image has actually loaded, run this 
    function fixMyWidth(){ 
     //this will make it 'responsive' again 
     document.getElementById("img").style.height = ""; 
     document.getElementById("img").style.width = ""; 
    } 
</script>