Question

我正在尝试制作一个包含左右两个图像的全宽标题，其中包含屏幕尺寸，但是当右图像与左边碰撞时，我希望左图像缩小尺寸。谁可以把我推向正确的方向？

HTML

<div class="header">
<img src="images/header1.jpg">
    <div class="menu">
    <ul>
            <li><a href="index.html">Home  </a></li>
            <li>&#160; | &#160;</li>
            <li><a href="about.html"><strong>About  </strong></a></li>
            <li>&#160; | &#160;</li>
            <li><a href="blog">Blog  </a></li>
            <li>&#160; | &#160;</li>
            <li><a href="contact.html">Contact</a></li>
    </ul>
    </div>
<img src="images/header2.jpg">
</div>

CSS

.header {

    padding: 0px;
    margin: 0px;
    left: 0;
    background-color: #eac7f1; 
    position: relative;
    width: 100%;
    height: 165px;
    background-repeat: no-repeat;
    overflow: auto;
    z-index: 1;
}

.header img {
     position: absolute;
    bottom: 0;
}

.header img:nth-of-type(1) {
    left: 0;
    z-index: 3;
}

.header img:nth-of-type(2) {
    right: 0;
    z-index: 2; 
}

Answer 1

根据你提到的css，img都是绝对的，所以你可以将它们向右或向左浮动..

首选你可以通过媒体查询解决此问题，小屏幕（移动设备，标签）设置顶部，底部或左侧，右侧绝对位置

Answer 2

试试这个

.header > img{
position: relative;
width: 20%;
height: auto;
}

根据您的需要调整高度vh值。它根据父宽度

缩放img大小

（响应）包含绝对左右图像的相对DIV

2 个答案: