html css img解析操作

我刚开始研究html和css，需要了解如何解决以下问题：

我的html正文中有以下部分

。第节：{
填充：0；
背景色：#F4；
}
.餐饮展示{
列表样式：无；
宽度：100%；
}
李先生{
显示：块；
浮动：左；
宽度：25%；
}
.用餐照片{
宽度：100%；
保证金：0；
溢出：隐藏；
背景色：#000；
}
.用餐照片{
/*
宽度100%+高度自动设置以在有界区域显示整个图像。
这类似于android和iOS中的包装内容高度和宽度。
*/
宽度：100%；
身高：100%；
/*
使所有东西都变大了，但现在图像比容器本身大。
因此，我们必须在容器中隐藏溢出，并隐藏属性。
*/
转换：比例（1.30）；
过渡：变换0.5s，不透明度0.5s；
不透明度：0.6；
}
.用餐照片img：悬停{
不透明度：1；
转换：比例（1.03）；
}

发生这种情况是因为图像的大小确实不同。在许多现代网站中，图像被处理（用拇指钉住）成精确的大小，这首先应该避免这些问题。然而，使用失败保存CSS技术是一个好主意

---

首先确定图像所需的大小/纵横比，并在样式表中进行设置。这将扭曲某些“拉伸”的图像。使用

对象拟合：覆盖

可以取消此效果，这将确保图像覆盖整个盒子（即使某些部分在边缘丢失）。

请尝试下面的代码片段

可以在

https://picsum.photos/120/300/?random

。第节：{
填充：0；
背景色：#F4；
保证金：0；
}
.餐饮展示{
列表样式：无；
宽度：100%；
}
李先生{
显示：内联块；
浮动：左；
宽度：25%；
}
.用餐照片{
宽度：100%；
高度：100px；
位置：相对位置；
溢出：隐藏；
保证金：0；
}
.用餐照片{
显示：块；
宽度：100%；
身高：100%；
位置：绝对位置；
最高：50%；
左：50%；
转换：转换（-50%，-50%）比例（1.12）；
转变：转变0.35s；
}
.用餐照片img：悬停{
不透明度：1；
转换：转换（-50%，-50%）比例（1）；
}

您可以使用，然后使用对象适合度使图像完美适合（您还需要使用ie polyfill进行对象适合度）：

正文{
保证金：0；
}
.餐饮展示{
/*重置列表样式并使用flex在一行中对齐*/
列表样式：无；
保证金：0；
填充：0；
显示器：flex；
柔性包装：包装；
}
.餐饮展示>李{
/*使李的宽度为25%*/
最大宽度：25%；
宽度：25%；
保证金：0；
填充：0；
}
.膳食展示图{
/*把数字做成块和相对位置，给它一个高宽比-这里我用75%的填充顶部*/
显示：块；
宽度：100%；
位置：相对位置；
保证金：0；
填充：75%0；
}
.img{
对象适合度：封面；/*添加此*/
显示：块；
位置：绝对；/*这是填充图形的位置*/
宽度：100%；
身高：100%；
排名：0；
左：0；
转变：转变0.5s；
}
.用餐照片img：悬停{
转换：标度（1.05）；
}
.图：悬停{
z-索引：1；/*将悬停图形置于前面*/
}

实际上，要使

对象适合

正常工作，图像容器必须具有尺寸。在下面的代码段中，取消注释

/*高度：320px*/足以使其工作。当然，这个维度是静态的，必须是一行中最小的图片之一

如果您想要一个完整的动态技巧，使自己适应每行的最小图片，而不是指定给定的高度或比率，那么仍然可以使用javascript。我在这里制作了一个快速示例，动态地获取最小高度并将其应用于元素（在jQuery中）


函数resizeMealPhotos（）{
$（'.Founds showcase'）。每个（函数（）{
var h=无穷大；
$（this）.find（“.meat photo”）.each（函数