Question

假设我想将10 * 60的图像放入15 * 15的容器中。也就是说，我想拉伸我的图像以使宽度对应（因此这将是15 * 90的图像），但我不希望高度拉伸超过宽度，因此我的图像的底部将没有出现。

当我定义我的html图像时，我将宽度= 100％拉伸宽度，但我对高度说了什么？

谢谢！

Answer 1

您还可以将图像置于绝对位置，这样您就可以执行以下操作：

.embed.ratio-16-9 IMG

.embed {
  position: relative;
  height: 0;
  overflow: hidden;
  max-width: 100%;

  img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-width: 100%;
  }
.ratio-16-9 {
  padding-bottom: 56.25%;
}

图像高度不应再粘在你身上了。

Answer 2

您可以简单地使用背景图像并将其background-size属性设置为包含（或覆盖，取决于您的需要）。

<div class="container"></div>

you mistakenly ""
it means string
you need variable
String guess;
 cin  >> guess;

Answer 3

CSS background-image with background-size：cover

您应该使用CSS background-image属性来为您的Web元素设置样式。

您正在寻找的可能是background-size: cover;。它的作用是根据容器的宽度拟合图像。

CSS：

.cont {
    width: 200px;
    height: 200px;
    background-image: url('urlToImage100x300.jpg');
    background-size: cover;
}

HTML：

<div class="cont"></div>

另外，如果您想垂直居中图像，请使用background-position-y: center;。

.cont {
    width: 200px;
    height: 200px;
    background-image: url('urlToImage100x300.jpg');
    background-size: cover;
    background-position-y: center;
}

HTML img标记

如果您确实需要使用<img />标记进行此操作;您需要的是将图像放入容器中，然后将width，height设置为所需的大小，并将overflow-y设置为隐藏。之后，将img的width设置为100％并完成。

CSS：

.cont {
    width: 200px;
    height: 200px;
    overflow-y: hidden;
}

.cont img {
    width: 100%;
}

HTML：

<div class="cont"><img src="image100x300.jpg" /></div>

使用没有y轴中心的演示CSS：https://jsfiddle.net/e2vt3sw6/

带有y轴中心的工作演示CSS：https://jsfiddle.net/e2vt3sw6/1/

使用演示HTML img标记：https://jsfiddle.net/e2vt3sw6/2/

测试使用150x300px图像和200x200px容器的位置

Answer 4

如果我正确理解了这个问题，您就不必在height属性上指定任何值。如果您不想要显示图像的溢出部分，只需在容器上设置overflow:hidden即可。希望这会有所帮助。

在html中，如何只在一个维度上拉伸图像？

4 个答案: