响应式设计 同一张图片分别用img和background调用，如何让他们自适应屏幕的大小？显示的效果一样
发布网友
发布时间：2022-12-24 00:56
共1个回答
热心网友
时间：2023-10-06 04:10
img的思路：JS获取IMG的长宽比例，然后获取容器的长宽比，如果容器的长：宽大于或者等于IMG的长宽比例，就把IMG的宽度设置成100%，高度auto，反之则把IMG的高度设置成100%，宽度auto。在CSS里面添加img{margin:0 -100%}，用display:tabel-cell来做垂直居中(未实验)。
background的实现方法(CSS3)：用background必须要CSS3才能自适应，代码是
background-size:cover;backgrond-attachment:fixed;background-position:center;效果一样
