css两张图片一起自适应

CSS可以帮助我们实现两张图片的自适应布局。下面请看代码实例：

<div>
  <img src="https://example.com/image1.jpg" alt="image1" class="img-one">
  <img src="https://example.com/image2.jpg" alt="image2" class="img-two">
</div>

<style>
  div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .img-one, .img-two {
    width: 50%;
    height: auto;
  }

  @media only screen and (max-width: 600px) {
    .img-one, .img-two {
      width: 100%;
    }
  }
</style> 

如上所示：我们在<div>中放了两张图片，它们分别使用了class“img-one”和“img-two”。接下来，我们使用CSS来实现它们的自适应布局。

首先，我们用“display: flex”来使这两张图片子元素成为一个伸缩容器；“flex-wrap: wrap”属性代表当子元素（即图片）在一行排满后，会向下换行；“justify-content: center”用来将子元素居中显示。

然后，给每个图片元素的宽度设为50%。这样两张图片就可以平分容器的宽度。

最后，我们用@media查询来调整样式。当屏幕宽度小于等于600像素时，将每个图片元素的宽度设为100%。这样就可以保证在移动设备上图片能够自适应显示了。

总之，我们可以使用flexbox和@media查询来实现两张图片的自适应布局。这种布局方法可以在各种设备和屏幕尺寸上运作良好。