Question

我已经找到了很多这个问题的答案，但没有（我能找到的）适用于我的特定情况。

我在div中有一个图像，我想用页面的宽度缩放。但是，我的图像比您实际看到的图像要大得多，因为我正在使用object-fit: cover和object-position将其放入容器中。我无法找到一种解决方案，在缩小容器（以及因此图像）的同时保持图像相同。

换句话说，我希望容器和图像能够缩放并使图像看起来完全相同。我发现的所有解决方案都会在页面宽度发生变化时将图像移动到容器内部。

编辑为清晰起见：想象一下，在图像的正中心有一个点，通常该点位于容器的正中心。在我的情况下（因为我认为对象位置），当页面的宽度改变时，点垂直移动。我需要一些方法来缩小容器，使点保持在同一个位置。

编辑2：想出来。通过vw（视口宽度）设置容器的高度正是我正在寻找的。例如height: 10vw;

这是我目前的CSS：

.container {
  height: 25%; /* This would need to be removed/changed I assume.*/
}

.image {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: 100% 80%;
}

我的容器是页面的整个宽度。

Answer 1

这对我来说似乎很明显，我想我没有理解你的观点。

这是你想要的吗？这个片段显示无论图片的大小，它都适合容器。

编辑您的问题是您的图片未在容器中居中。要做到这一点，你有几个选择。这是一个使用变换的相对位置。你也可以使用flexbox，在我看来，这更好。

.container {
  width: 500px;
  border: 1px solid darkcyan;
  height: 600px;
}

img {
  max-width: 100%;
  height: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<div class="container">
  <img src="https://placeholdit.co//i/500x250?&bg=cccccc&fc=000000&text=BIG IMAGE">
</div>

Answer 2

.image{
    max-width: 100%;
}

<img src="https://wallpaperbrowse.com/media/images/750806.jpg" class="image" />

要让图片填充其容器的宽度，您需要max-width属性：

.image {
    max-width: 100%;
}

Answer 3

您可以以max-width: 100%;的格式使用img 。但另一种方式是使用您的图像作为div的背景，具有以下样式：

＆＃13;

    .container {
        background-image:    url(https://maxoffsky.com/word/wp-content/uploads/2014/04/andreasbg.png);
        background-size:     cover; 
        background-repeat:   no-repeat;
        background-position: center center;
        width:70%;
        height:300px;
        margin:0 auto;
    }

＆＃13;

<div class="container"><div>

＆＃13;

<强>更新您可以运行以下演示并更改其大小here

＆＃13;

    .container {
        background-color: black;
        width:70%;
        margin:0 auto;
        padding:20px;
        position:relative;
    }
    
    img{
      position:relative;
      max-width:100%;
    }
    .dot{
      background:yellow;
      width:10px;
      height:10px;
      position:absolute;
      left:50%;
      top:50%;
      transform: translate(-5px,-5px);
      z-index:1;
      border-radius:50%;
    }

＆＃13;

<div class="container">
  <div class="dot"></div>
  <img src="https://maxoffsky.com/word/wp-content/uploads/2014/04/andreasbg.png">
<div>

＆＃13;

您可以在图像中心和容器中心看到黄点（任何页面尺寸）：

小页面尺寸：

大页面尺寸

Answer 4

好吧，经过多挖掘后，我找到了问题的答案。解决方案是使用vw（视口宽度）来设置容器的高度。

在我的情况下，在容器上使用height: 10vw;正是我正在寻找的。当然可以根据您希望容器/图像占用多少空间来调整其值。

容器中的图像按比例缩放到页面宽度

4 个答案: