Question

我有一个div，它使用不同的srcsets来构建一个图像。我已经将div和图像宽度和高度设置为100％，以便img拥抱整个页面，因此很容易确定，根据设备屏幕，当它没有＆＃时，它将显示图像的更大或更低部分39; t适合div。我对此很好，但问题是我希望图像显示在顶部，这样如果高度不适合屏幕高度的100％，那么img的一部分会被切割它是它的底部，但是img从底部开始加载，而顶部则被切割。

＆＃13;

.portada {
  width: 100%;
  height: 100%;
}

#portadaImg {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.portadaLetras {
  position: absolute;
  color: #FFFFFF;
  font-size: 2em;
  width: 33%;
  min-width: 170px;
  text-align: center;
  background-color: #000000;
}

.centerBoth {
  display: flex;
  justify-content: center;
  align-items: center;
}

＆＃13;

<div class="portada centerBoth">
  <img id="portadaImg" class="img-fluid" srcset="images/portada/portada-xl.jpg 2400w,
                  images/portada/portada-l.jpg 1200w,
                  images/portada/portada-md.jpg 992w,
                  images/portada/portada-tablet.jpg 768w,
                  images/portada/portada-mobile.jpg 458w" src="images/portada/portada-mobile.jpg" alt="Foto de portada">
  <div class="portadaLetras">
    Saint Paolo
    <p>MMXIV</p>
  </div>
</div>

＆＃13;

知道我遗失了什么财产吗？

Answer 1

如果您没有使用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;
}

Answer 2

除了我已经拥有的那个之外，还将以下句子添加到.portada类中：

object-position: center top;

Answer 3

您可以将图片绝对定位在div overflow: hidden内。

下面的图片是225像素高，但它的父div只有160像素高，所以它从底部被裁剪，留下图像的顶部与其父div的顶部对齐。

.image {
  position: relative;
  overflow: hidden;
  width: 378px;
  height: 160px;
}
.image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

<div class="image">
  <img src="https://images.pexels.com/photos/52903/pexels-photo-52903.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=225&w=378" alt="colored pencils">
</div>

复制background-size: cover; background-position: top center效果的更通用的解决方案看起来像这样：

.image {
  position: relative;
  overflow: hidden;
  width: 378px; /* or whatever */
  height: 160px; /* or whatever */
}
.image img {
  position: absolute;
  top: 0;
  left: -100%;
  right: -100%;
  margin: auto;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
}

当它不合适时，切割图像的底部而不是顶部

3 个答案: