CSS可以帮助我们实现两张图片的自适应布局。下面请看代码实例:<div> <img src= https://example.com/image1.jpg a
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查询来实现两张图片的自适应布局。这种布局方法可以在各种设备和屏幕尺寸上运作良好。
粉丝
0
关注
0
收藏
0