Question

我有一个给定大小的容器，里面有一个图像。我希望图像扩展到100％高度或100％宽度，具体取决于最后一个，我希望它保持其纵横比，因此任何粘在容器上的东西都会被裁掉。如果它被侧面裁剪，我也希望它能够居中。

所以要明确的是，如果它的图片非常宽，那么它会有library(rvest) t_url = "https://www.treasury.gov/resource-center/data-chart-center/interest-rates/Pages/TextView.aspx?data=yield" rates <- read_html(t_url) %>% html_node(".t-chart") %>% html_table() rates # Date 1 mo 3 mo 6 mo 1 yr 2 yr 3 yr 5 yr 7 yr 10 yr 20 yr 30 yr # 1 04/03/17 0.73 0.79 0.92 1.02 1.24 1.47 1.88 2.16 2.35 2.71 2.98 # 2 04/04/17 0.77 0.79 0.92 1.03 1.25 1.47 1.88 2.16 2.36 2.72 2.99 # 3 04/05/17 0.77 0.80 0.93 1.03 1.24 1.44 1.85 2.14 2.34 2.71 2.98 # 4 04/06/17 0.78 0.79 0.94 1.05 1.24 1.45 1.87 2.15 2.34 2.72 2.99 # 5 04/07/17 0.77 0.82 0.95 1.08 1.29 1.52 1.92 2.20 2.38 2.74 3.00 # 6 04/10/17 0.77 0.82 0.97 1.07 1.29 1.52 1.91 2.18 2.37 2.72 2.99 # 7 04/11/17 0.74 0.82 0.94 1.05 1.24 1.45 1.84 2.11 2.32 2.67 2.93 # 8 04/12/17 0.77 0.81 0.95 1.04 1.24 1.44 1.81 2.09 2.28 2.65 2.92 # 9 04/13/17 0.76 0.81 0.94 1.03 1.21 1.40 1.77 2.05 2.24 2.62 2.89，如果它的图片非常高，那就会有height: 100%。

例如，这里是容器和图像，既没有正确的尺寸，也没有居中：

https://jsfiddle.net/y5px1ch9/1/

width: 100%

任何人都知道这是否可以用于CSS？

Answer 1

由于你有一个固定大小的包装器，而object-fit没有那么好的浏览器支持，我建议你在包装器上使用background / background-size

现在，通过设置其位置，您可以控制应该裁剪的位置。在下面的示例中，我使用了left top，这意味着它会在右侧/底部进行裁剪，在您的情况下，您可能需要center center，它将同时按上下/左/右裁剪，基于哪个两个溢出。

根据评论更新

还可以在标记中设置图片来源，以及如何使用img设置图片来源，这里通过设置background-image: url()内联来完成。

.wrapper {
  position: relative;
  left: 40%;
  width: 100px;
  height: 200px;
  border: 1px black solid;
  overflow: hidden;
  text-align: center;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
}

<div class="wrapper" style="background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG)">
</div>

以下是使用object-fit

的版本

.wrapper {
  position: relative;
  left: 40%;
  width: 100px;
  height: 200px;
  border: 1px black solid;
  overflow: hidden;
  text-align: center;
}

.picture {
  position: relative;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: left top;
}

<div class="wrapper">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG" class="picture">
</div>

Answer 2

这是可能的，但您必须事先知道宽高比，知道这可以为图像预留空间

div {
    width: 100%;
    overflow:hidden;
    position:relative;
}

div::after {
  padding-top: 56.25%; /* percentage of containing block _width_ */
  display: block;
  content: '';
}

div img {
    display: block;
    width:100%;
    height:auto;
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

<div>
    <img src="https://placehold.it/200x300"/>
</div>

主要技巧是填充顶部：56.25％; ...纵横比

Answer 3

如果您将图片定义为背景图片，那么您可以使用background-size: contain - 这可以满足您的需求：

.wrapper {
  position: relative;
  left: 40%;
  width: 100px;
  height: 200px;
  border: 1px black solid;
  background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/S%C3%A4ugende_H%C3%BCndin.JPG/800px-S%C3%A4ugende_H%C3%BCndin.JPG) no-repeat center center;
  background-size: contain;
}

<div class="wrapper">
</div>

Answer 4

试试这个

<强>垂直

.picture {
      position: relative;
      height: 100%;
      width: auto;
      margin: auto;
      left: 0;
      right: 0;
      background-position: center;
    }

<强>水平

.picture {
      position: relative;
      width: 100%;
      height: auto;
      margin: auto;
      left: 0;
      right: 0;
      background-position: center;
    }

jsfiddle horizontal case

jsfiddle vertical case

Answer 5

请以百分比％添加高度属性auto和图像宽度，在此属性中您可以管理宽高比

width:50%, 
height:auto,

是否可以在仍然填充容器并保持其纵横比的同时使图像尽可能小？

5 个答案: