如果您从事Web开发，则很可能您熟悉两个怪物，本文将讨论其中的两个问题，我们将在今天对其进行翻译。 我们正在谈论图像和截止日期。 有时，由于某种原因，这些图片不适合放在为它们设计的页面布局中，因此您无法花费数小时来找出答案。
该材料的作者说他经常遇到类似的问题，这些碰撞使他学到了一些东西。 在这里，他想谈谈他最喜欢的五种管理图像尺寸的方法。
方法一：背景图片
星期五 晚上五点。 您急需完成某个页面。 一切都准备就绪，唯一的问题就是图片，这些图片根本不适合应放在的位置。 如果您遇到这种情况-这是一个可以帮助您的魔术工具：
.myImg { background-image: url("my-image.png"); background-size: cover; }
看起来很熟悉吗？ 我们都做了一次。 这是否暗示您欺诈？
使用
background属性非常有用，它们可以完成预期的工作。 但是，值得记住的是，它们仅应用于不属于页面主要内容的那些图像，用于替换文本的图像以及在某些
特殊情况下 。
方法2：对象拟合
如果我说
object-fit属性适用于
<img>元素怎么办？ 顺便说一句，它也可以用于视频。
.myImg { object-fit: cover; width: 320px; height: 180px; }
仅此而已。 请注意，可以将
object-fit属性设置为
contain 。
▍对象适配支持
不幸的是，
object-fit在IE和旧版本的Safari中不起作用，但是，在这种情况下，存在
polyfill 。
这是
从此处获取的支持信息。
支持适合对象的桌面浏览器→
这是使用对象拟合的示例
方法3：Netflix的使用方式
我们刚才谈到的内容可能看起来很有趣，但是在过时的浏览器中，如果没有polyfill，这将无法正常工作。 如果您需要通用的东西，也许我们现在要谈论的就是适合您的。 这种方法是我的最爱之一，可在所有地方使用。
它包含以下事实：必须将图像放在父元素中，其
position属性设置为
relative ，而
padding属性以百分比形式设置。 结果，图像将占据父元素的整个空闲区域。 看起来像这样：
.wrapper { position: relative; padding-top: 56.25%; } img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
在这里您可能会认为它太复杂了。 但是，在了解了该技术的含义之后，您会意识到它非常简单和方便。 另外，该技术例如在Netflix中被
广泛使用 。
看一下班级名称→
这是该技术实施的一个例子
方法4：高度
在这里，要控制图像大小，请使用
height: auto属性，以及
max-width属性。 您可能已经知道此技术：
img { height: auto; width: 100%; max-width: 720px; }
当布局不太复杂时，这种方法适用于大多数情况。
→
这是一个例子方法5：图像管理和性能
“性能”是指页面加载时间。 大图像可能需要很长时间才能加载，这给用户留下了您的页面显示缓慢的印象，尤其是在移动设备上查看这些页面时。
您是否知道在
现代浏览器中您可以根据页面宽度来更改图像源？ 这就是为什么
srcset属性
srcset 。
可以在HTML 5标签中使用类似的属性
. , , <img> . , , <img> ：
<picture> <source media="(max-width: 799px)" srcset="elva-480w.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img align="center" src="elva-800w.jpg"> </picture>
→ 这是一个例子总结
总结一下：
- 如果您的图像不属于页面内容，请使用
background-image 。 - 如果IE支持对您不感兴趣，请使用
object-fit 。 - 具有自定义
padding的基于Netflix的容器技术无处不在。 - 在大多数情况下，要解决图片问题，只需在CSS中使用
height: auto属性； - 如果要减少页面加载时间，请使用
srcset属性在移动设备上下载较小的图像。
我们希望这里讨论的处理图像的方法对您有用。
