How to ensure the image inside a DIV resizes with browser resize

问题

Works fine (the image fills up the DIV and resizes based on browser size):

<div class="pageImgHdrMain">
    <div id="pageImgHdrSub">
        <div class="pageImgHolder" style="background: #fcf;">
            <img src="theImages/dummyBanner.jpg" style="width: 100%; height: auto;" />
        </div>
    </div>
</div>

Doesn't work, the image is stretched out and cuts off as the browser resizes:

<div class="pageImgHdrMain">
    <div id="pageImgHdrSub">
        <div class="pageImgHolder" style="background: #fcf;">
            <div id="ctl00_BodyPlaceHolder_SpecialtyContentBlockImg">
                <div>
                    <div style="display:none;" align="left"></div>
                    <p><img src="art.jpg" alt="ArtThumbOne" title="ArtThumbOne" class=""><br></p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS:

.pageImgHdrMain
{
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
}
.pageImgHdrSub
{
    position: relative;
    width: 100%;
    margin: 0 auto; /*center-aligned*/
}
.pageImgHolder
{
    position: relative;
    margin: 0px;
    padding: 0px;
    float: left;
    top: 0px;
    left: 0px;
    width: 1100px;
    height: 337px;
    overflow: hidden;
}
.pageImgHolder div div p img {
    width: 100%;
    height: auto;
}

I think what is messing it up is there are nested DIV inside the main DIV.

How can I resolve the issue.

回答1:

What are all the inner unnamed divs for?

I think what you need is to set the #ctl00_BodyPlaceHolder_SpecialtyContentBlockImg to position:absolute; min-width:100%; min-height:100%; max-width:100%; max-height:100%;

also you might want to consider renaming the ID :-)

The thing is, when you use an absolute positioned element inside another element (your relative positioned element) - you force the absolute to be exactly the same size. This might not work with an inner relative element.

The unnamed divs you have are static as default and behaves more or less like the relative positioned elements.

Hope it helps.

回答2:

Try adding following lines

min-width = '1000px'; // or any size you desire. It will set the minimum width
max-width = '1250px'; // or any size you desire. It will set the maximum width
min-height = '100%'; // or any size you desire

To the class "pageImgHolder div div p img"

.pageImgHolder div div p img {
        width: 100%;
        height: auto;
        min-width = '1000px'; // or any size you desire
        max-width = '1250px'; // or any size you desire
        min-height = '500px'; // or any size you desire
    }

Also add min and max properties in

<img src="theImages/dummyBanner.jpg" style="width: 100%; height: auto;" />

<img src="theImages/dummyBanner.jpg" style="width: 100%; height: auto; min-width:900px; max-width:1000px;" />

回答3:

I had the same problem before and used first a table with width 100% and the div inside the table with the same, also without borders or paddings all set to 0 try it and tell me how it works. Tablets are old stuff but if you make them work together with divs then you will never more have troubles with divs

来源：https://stackoverflow.com/questions/26553763/how-to-ensure-the-image-inside-a-div-resizes-with-browser-resize

标签

html

css

responsive-design