首页 文章

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

提问于
浏览 次
-1

我有一个设置为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:` ```java #content { width: 50%; margin: 0 auto; padding: 0 6% 1% 6%; background-color: #f8f8f8; border: 1px solid #ccc; min-width: 500px; }

#Photo {
text-align: center;
position: relative;
right: 13.1%;
}

css

1 回答

  • 0

    您可以更轻松地将图像设置为背景图像并使用封面属性 . 您仍然可以将背景位置设置为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%;
}
    回复于

相关问题