html - 两张图片，一张调整大小，一张未调整大小

Question

我有一个包含并排图像的 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>

Answer 1

这是一个演示: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%;
}

干杯，