Question

我正在尝试使用css和html创建一个看起来像封面图片here的图片。我尝试了不同的东西，但迄今为止没有任何工作。

这是我的HTML代码：

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

我应该使用什么css代码？

Answer 1

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

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

如果您有自定义 CSS ，则：

HTML：

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

CSS：

#image
{
    width: 100%;
}

此外，您下次可以File -> View Source，或者Google。

Answer 2

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

＆＃13;

.container{
  width:100%;
  height:60px;
  overflow:hidden;
}
.img {
  width:100%;
);

＆＃13;

<div class="container">
  <img src="http://placehold.it/100x100" class="img" /> 
</div>

＆＃13;

Answer 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管理整个事情。

Answer 4

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

max-height: 200px;
width: auto;

Answer 5

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

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

Answer 6

设置父元素的高度，并给出宽度。然后使用带有“background-size：cover”

规则的背景图像

    .parent {
       background-image: url(../img/team/bgteam.jpg);
       background-repeat: no-repeat;
       background-position: center center;
       -webkit-background-size: cover;
       background-size: cover;
    }

Answer 7

<div id="container">
    <img style="width: 100%; height: 40%;" id="image" src="...">
</div>

我希望这符合你的目的。

Answer 8

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

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

css

#image
{
width:100%;
height:
}

Answer 9

@Headers(
    "Content-type: text/xml"
)

具有固定高度的全宽图像

9 个答案: