Html 如果图像不存在，则剪切图像的底部而不是顶部'；不合适

我有一个div，它用不同的srcset保存一个图像。我已经将div和图像的宽度和高度设置为100%，这样img就可以覆盖整个页面，因此很容易假设，根据设备屏幕的不同，当图像不适合div时，它会显示图像的较大或较低部分。 我同意这一点，但问题是，我希望图像由顶部显示，这样，如果高度不符合屏幕高度的100%，并且一部分img被剪切，它就是它的底部，但是img开始从底部加载，它的顶部是被剪切的人

.portada{
宽度：100%；
身高：100%；
}
#波塔代姆{
身高：100%；
宽度：100%；
对象匹配：覆盖；
}
波塔代拉斯酒店{
位置：绝对位置；
颜色：#FFFFFF；
字号：2em；
宽度：33%；
最小宽度：170px；
文本对齐：居中；
背景色：#000000；
}
.都是{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

圣保罗
MMXIV

如果您不必使用srcset，为什么不使用背景图像而不是图像标记

它只会是：

.portada{
    background: #000 url(../path/to/image.jpg) no-repeat;
    background-size: cover;
}

编辑

我有点困惑，但如果你仍然愿意使用背景图像，也许问题在于你的Div样式

将此CSS应用于body标记，而不是

body{
    background: #000 url(../path/to/image.jpg) no-repeat center top;
    background-size: cover;
}

---

如果不必使用srcset，为什么不使用背景图像而不是图像标记

它只会是：

.portada{
    background: #000 url(../path/to/image.jpg) no-repeat;
    background-size: cover;
}

编辑

我有点困惑，但如果你仍然愿意使用背景图像，也许问题在于你的Div样式

将此CSS应用于body标记，而不是

body{
    background: #000 url(../path/to/image.jpg) no-repeat center top;
    background-size: cover;
}

---

在.portada类中添加以下句子，而不是我已有的句子：

object-position: center top;

---

在.portada类中添加以下句子，而不是我已有的句子：

object-position: center top;

---

通过使用

overflow:hidden

将图像绝对定位在

div

中，可以做到这一点

下图的高度为225px，但其父div的高度仅为160px，因此从底部裁剪，使图像顶部与其父div的顶部对齐

.image{
位置：相对位置；
溢出：隐藏；
宽度：378px；
高度：160px；
}
.图像img{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
高度：自动；
}

---

您可以通过使用

overflow:hidden

将图像绝对定位在

div

中来实现这一点

下图的高度为225px，但其父div的高度仅为160px，因此从底部裁剪，使图像顶部与其父div的顶部对齐

.image{
位置：相对位置；
溢出：隐藏；
宽度：378px；
高度：160px；
}
.图像img{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
高度：自动；
}

我必须使用srcset，否则我需要更改媒体查询以更改div的de-background图像，我不想这样做。在我尝试这种方法之前，我就是这么做的。你可能有一些我不知道的要求，但以我丰富的经验。。。现在你不必担心一堆不同的图像。这样做会增加开销。只需为所有屏幕选择一个漂亮的大“优化”图像。我的两分钱！好的，谢谢你的建议！但是，尽管我没有实现srcset，但仍然存在相同的问题，我的大图像将从背景加载，顶部将被剪切，因为它不适合100%高度和100%宽度的分区。如果我没有正确解释我自己，我可以编辑问题并发布一些评论images@Luiscri添加

背景位置：中上

到上面的代码，然后它将从底部而不是顶部切掉。@Paigemeink如果我将图像作为背景图像加载，但将其作为HTML图像加载，这将起作用。我必须使用srcset，因为我需要以其他方式更改媒体查询以更改div的de background image，我不想这样做。在我尝试这种方法之前，我就是这么做的。你可能有一些我不知道的要求，但以我丰富的经验。。。现在你不必担心一堆不同的图像。这样做会增加开销。只需为所有屏幕选择一个漂亮的大“优化”图像。我的两分钱！好的，谢谢你的建议！但是，尽管我没有实现srcset，但仍然存在相同的问题，我的大图像将从背景加载，顶部将被剪切，因为它不适合100%高度和100%宽度的分区。如果我没有正确解释我自己，我可以编辑问题并发布一些评论images@Luiscri添加

背景位置：中上

到上面的代码，然后它将从底部而不是顶部切掉。@Paigemeink如果我将图像作为背景图像加载，但将其作为HTML图像加载，这将起作用。有类似的吗？