如何使 div 里面的 img 能够根据宽度自动缩放,但是不影响比例?

火爆浪子
  • 2.8k

https://www.airbnb.com/s/Oreg...

clipboard.png

为什么可以依照萤幕的宽度,里面的内容会依照比例缩放而不会变形?
图片也是依照比例缩放. . . .
他不單純只有圖片會依照比例縮放
我查过好像是用 flex ,但仍然想不到怎麼做到他那樣的!
不管拉多宽或多窄,顶多就是里面的文字会换行或不换行
图片也会根据设定的宽度缩小放大
这到底是怎么做到的? !
我想偷也偷不了他的代码。 。 。想研究他怎么写的!
整個區塊會往右下角放大

回复
阅读 4.2k
4 个回答
✓ 已被采纳

看了一下,里面是背景图片的方式,设置了background-size:contain

如果你用图片<img>方式来写,类似的效果是设置object-fit:contain

关于图片的自适应,一般有一下几种情况

clipboard.png.]

https://www.zhangxinxu.com/st...

background-size:cover 你要好一点的效果还是尽量把图片的大小控制一下

如果是移动端可以看看css3 新出来的 object-fit 这个可以保持图片的比例,像上面这种可以有图片做为背景图片,根据 background 就可以达到 自适应了

宣传栏