Question

工作正常（图像填满DIV并根据浏览器大小调整大小）：

<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>

不起作用，图片会在浏览器调整大小时拉伸并切断：

<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;
}

我认为搞乱的是主DIV中有嵌套的DIV。

如何解决问题。

Answer 1

所有内部未命名的div是什么？

我认为您需要的是将#ctl00_BodyPlaceHolder_SpecialtyContentBlockImg设置为position:absolute; min-width:100%; min-height:100%; max-width:100%; max-height:100%;

您也可以考虑重命名ID： - ）

问题是，当你在另一个元素（你的相对定位元素）中使用绝对定位元素时 - 你强制绝对的大小完全相同。这可能不适用于内部相对元素。

您拥有的未命名div是static默认值，其行为或多或少与relative定位元素相似。

希望它有所帮助。

Answer 2

尝试添加以下行

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

到班级“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
    }

还在

中添加最小和最大属性

<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;" />

Answer 3

之前我遇到了同样的问题并首先使用宽度为100％的表格，并且表格内的div与之相同，也没有边框或填充都设置为0尝试并告诉我它是如何工作的。平板电脑是旧的东西，但如果你让它们与div一起工作那么你将永远不会有更多的divs麻烦

如何通过浏览器调整大小来确保DIV内的图像大小调整

3 个答案: