两个图像，一个调整大小，一个不调整大小

我有一个800px div包含并排图像，第一个是照片，另一个是地图。由于300px地图具有细节，使其在缩小尺寸时无法使用，所以我不希望它在小屏幕上调整大小。但是，该照片应无限制地调整大小，而不会强制地图环绕并出现在其下方。两个图像，一个调整大小，一个不调整大小

我猜测，有两个单独的容器，这将是更容易，但它可能只有一个容器？目前的代码是：

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

来源

2013-09-27 user604488

你还希望他们并排如果调整屏幕大小？ –

是的，我想要他们并排。显然，当屏幕尺寸下降到大约400px时，照片的剩余部分不会太多，但我会简单地通过媒体查询使其消失。 – user604488

下面是一个演示：http://codepen.io/theskumar/full/tHwjo

的codepen可以在这里找到：http://codepen.io/theskumar/pen/tHwjo

使用兄弟wser调整大小以查看效果。

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

干杯，

来源

2013-09-27 19:55:16 Saurabh

谢谢，Saurabh，但我注意到照片（在左边）调整了宽度，但它不按比例缩小高度。我尝试将代码重置为自动，但没有成功。 – user604488

我纠正了。我忽略了你创建了两个独立的div，一个用于图像，一个用于地图。我只是将照片高度更改为自动，并且您的代码完全按照我的需要工作。太感谢了。 – user604488

你甚至不需要明确地加上'height：auto'。如果你删除'height：400px'，它会正常工作，因为'auto'是默认行为。你也应该将答案标记为“接受/正确”，以便其他人来到这里。干杯！ – Saurabh

你的代码可能是

.container { 
    width: 800px; 
    max-width: 100%; 
white-space:nowrap; 
overflow:auto; 
    } 
    .photo { 
     float: left; 
width:calc(100%-300px); 
     max-width: 100%; 
     height: auto; 
    } 
    .map { 
     float: right; 
     width: 300px; 
min-width:300px; 
     height: 250px; 
    } 

<div class="container"> 
    <img class="photo" src="photo.jpg"> 
    <img class="map" src="map.png"> 
</div>

检查，让我知道

来源

2013-09-27 19:35:45 Anobik

在考虑跨浏览器兼容性时使用'calc'有什么看法？ – Saurabh

两个图像，一个调整大小，一个不调整大小

回答

相关问题