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

我有一个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>

.container{
宽度：800px；
最大宽度：100%；
}
.照片{
浮动：左；
最大宽度：100%；
高度：自动；
}
.地图{
浮动：对；
宽度：300px；
高度：250px；
}

您的代码可能是

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

.container{
宽度：800px；
最大宽度：100%；
空白：nowrap；
溢出：自动；
}
.照片{
浮动：左；
宽度：计算（100%-300px）；
最大宽度：100%；
高度：自动；
}
.地图{
浮动：对；
宽度：300px；
最小宽度：300px；
高度：250px；
}

检查并让我知道这是一个演示：

可在此处找到代码笔：

使用浏览器调整大小以查看效果

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>

---

干杯，

如果调整屏幕大小，您是否仍希望它们并排出现？是的，我希望它们并排出现。显然，当屏幕尺寸降至400px左右时，照片的剩余部分就不多了，但我会通过媒体查询使其消失。考虑到跨浏览器兼容性，使用

calc

的视图是什么？谢谢，Saurabh，但我注意到照片（左侧）调整了宽度，但它并没有按比例缩小高度。我试图将代码重置为自动，但没有成功。我得到了纠正。我忽略了您创建了两个单独的div，一个用于图像，一个用于地图。我只是把照片的高度改成了自动，你的代码完全符合我的需要。非常感谢。您甚至不需要显式地放置

height:auto

。如果删除高度为400px的

height:400px

将正常工作，因为

auto

是默认行为。此外，您还应将答案标记为

已接受/正确

，以供其他人使用。干杯这绝对是我想要的答案。问题是，我找不到任何地方，没有一个按钮或链接，可以将此标记为已回答。有什么想法吗？@user604488这应该能帮到你：

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