我有一个包含并排图像的 800 像素 div,第一个是照片,另一个是 map 。由于 300px map 的细节在缩小时变得毫无用处,我不希望它在较小的屏幕上调整大小。然而,照片应无限调整大小,而不会强制 map 环绕并显示在其下方。
我猜测使用两个单独的容器会更容易,但是只使用一个容器是否可能?目前的代码是:
.container {
width: 800px;
max-width: 100%;
}
.photo {
float: left;
max-width: 100%;
height: auto;
}
.map {
float: right;
width: 300px;
height: 250px;
}
<div class="container">
<img class="photo" src="photo.jpg">
<img class="map" src="map.png">
</div>
最佳答案
这是一个演示:http://codepen.io/theskumar/full/tHwjo
codepen 可以在这里找到:http://codepen.io/theskumar/pen/tHwjo
使用浏览器调整大小来查看效果。
html
<div class="container">
<div class="photo"><img src="http://placehold.it/400x400"> </div>
<div class="map"><img src="http://placehold.it/300x400"></div>
</div>
CSS
.container{
position: relative;
/* for demo */
width: 90%;
margin: 0 auto;
}
.photo {
margin-right: 300px;
/* for demo */
height: 400px;
border: 4px solid red;
}
.map {
position: absolute;
right: 0;
top: 0;
width: 300px;
/* for demo */
border: 3px solid blue;
height: 400px;
}
img {
width: 100%;
height: 100%;
}
干杯,
关于html - 两张图片,一张调整大小,一张未调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19058381/