Question

我有一个设置为width = 120％的图像，其中position = relative在div中。 div设置为宽度= 50％，边距为6％，最小宽度为300px。当我调整浏览器窗口的大小并使其变小时，图像和div会变小。但在某一点上，与div相比，图像停止变小并变大，从而破坏了设计（见下文）。如何解决此问题，以便图像和div始终一起调整大小？谢谢

_______ ___________ | image | | image | |_______| |___________| | div | ---> | | | with | | div | | text | | | |_______| |_______|

这是HTML代码：



<article id="content">
<div id="Photo">
<img src="images/A04.jpg" width="126%" />               
</div> 
<p> text </p>
</article>    


Here is the CSS code:

<article id="content">
<div id="Photo">
<img src="images/A04.jpg" width="126%" />               
</div> 
<p> text </p>
</article>

Answer 1

您可以更轻松地将图像设置为背景图像并使用封面属性。您仍然可以将背景位置设置为13％。

<article id="content">
    <div id="Photo">
    </div> 
    <p> text </p>
</article>    


#content {
    width: 50%;
    margin: 0 auto;
    padding: 0 6% 1% 6%;
    background-color: #f8f8f8; 
    border: 1px solid #ccc; 
    min-width: 500px;
}

#Photo {
    background-image: url();
    background-size: cover;
    background-position: center 13%;
}

图像和Div不要一起调整大小

1 个答案: