10

我正在尝试创建一个看起来像这里的封面图像的图像，只使用 css 和 html。我尝试了不同的东西，但到目前为止没有任何效果。

这是我的html代码：

<div id="container">
    <img id="image" src="...">
</div>

我应该使用什么 css 代码？

4

9 回答 9

20

将图像的宽度设置为100%，图像的高度将自行调整：

<img style="width:100%;" id="image" src="...">

如果您有自定义CSS，则：

HTML：

<img id="image" src="...">

CSS：

#image
{
    width: 100%;
}

另外，你可以File -> View Source下次做，或者谷歌。

于 2013-12-24T16:06:08.007 回答
6

如果你想拥有相同的比例，你应该创建一个容器并隐藏图像的一部分。

.container{
  width:100%;
  height:60px;
  overflow:hidden;
}
.img {
  width:100%;
}
<div class="container">
  <img src="http://placehold.it/100x100" class="img" alt="Our Location" /> 
</div>

于 2016-11-07T09:55:04.097 回答
4

为了不划伤图像，您需要使用：

max-height: 200px;
width: auto;
于 2016-11-24T14:43:47.487 回答
3

这可以通过多种方式完成。我通常在课堂上这样做。

从班级

.image
{
    width:100%;


}

为此，您的 html 将是：

<img class="image" src="images/image_name">

或者，如果您想使用内联样式对其进行样式设置，那么您只需：

<img style="width:100%; height:60px" id="image" src="images/image_name">

但是，我建议从您的外部样式表中执行此操作，因为随着项目的增长，您会意识到使用 html 和 css 的单独文件可以更轻松地管理整个事情。

于 2013-12-24T16:15:48.430 回答
1

设置父元素的高度，并给出宽度。然后使用具有规则“背景尺寸：封面”的背景图像

    .parent {
       background-image: url(../img/team/bgteam.jpg);
       background-repeat: no-repeat;
       background-position: center center;
       -webkit-background-size: cover;
       background-size: cover;
    }
于 2016-11-07T10:41:24.017 回答
0

如果您不想丢失图像的比例，请不要打扰，height:300px;只需使用width:100%;.

如果图像太大，则必须使用图像编辑器对其进行裁剪。

于 2013-12-24T16:18:05.543 回答
0

您可以使用像素或百分比。

<div id="container">
<img id="image" src="...">
</div>

css

#image
{
width:100%;
height:
}
于 2020-01-17T00:33:58.317 回答
0 
<div id="container">
    <img style="width: 100%; height: 40%;" id="image" src="...">
</div>

我希望这能达到你的目的。

于 2018-01-16T18:59:56.690 回答
0 
#image {
  width: 100%;
  height: 100px; //static
  object-fit: cover;
}
于 2020-06-30T15:36:29.253 回答