如果让背景或者图片自适应宽度为100%的div？不变形

Question

html
<div class="pic"></div>
css
.pic { float: right; width: 32%; height: 371px; overflow: hidden}

做成背景和图片那个好点？如何让他自适应这个容器而且不变形呢?

Answer 1

试一下background-size: cover;..

Answer 2

长跟宽不变形的话，基本是实现不了。除非你是针对某一尺寸的屏幕而专门设计你的ui;
自适应容器：
background-size: cover;这个会存在变形，而且不是等比例的，这个得看你的情况了
有时候是宽度100%，而高是auto的，不过这个跟background-size: cover有点像。

我们针对不同屏幕采取的解决方法是：图片大小不变，保留中间部分，根据不同屏幕裁剪掉两边。

Answer 3

用cover 会铺满，如果没有按比例的话，可能有点会不显示出来。用 contain的话 如果图片没按比例的话，不会铺满。

Answer 4

用vw做单位呢

Answer 5

一般情况下，作成背景图是比较好操作的，如果整体代码都采用rem为单位的话，是可以实现不变形，自适应的。

Answer 6

这个看你最低要求是什么了。但是有一点肯定。宽高只能有一个是固定值。另一个是不设置（自动缩放）。这样你给其他位置做一个超出去的背景色，就可以了

Answer 7

我的做法是使用max-width，这样图片的宽度就永远不会超过width，同时也能自适应。

提示：max-width和max-height是我经验用来做图片自适应的

Answer 8

用ps切成一样的宽高

Answer 9

我告诉你几个解决方案吧
1.使用background-size: 不管你使用background-size的哪一个属性都是不会完全没有问题的（其次，PC端的话还会存在低版本的兼容问题）
2.如果你是做移动端的项目的话，可以因为会使用rem单位，所以从PSD文件等比切下图片使用background-size:还是没有问题的。
3.如果是PC端的项目，那么首先告诉你一点不可能完全兼容会有这样几个极端的情况
A.倘若你是一个固定在侧边的侧边栏，然后高度是100%（等于屏幕的高度，并且用户的屏幕大小是不确定的），你不可能去切一下非常巨大的图片，然后去缩放。
B.就算你使用了一张很大的图片去缩放，还需要UI设计控制好块的宽高，需要跟图片的大小是等比放大或者缩小
所以，如果移动端的小图片可以基本采用background-size去等比缩放基本是没有问题的。
PC端的话就很蛋疼了，算上极端的情况完全保证是不可能的了，所以你需要事先和UI沟通一下，在设计的时候最好是保证图片的等比方法或者缩小。尽量去避免那些极端的情况