固定高度的全宽图像

Posted

技术标签:

【中文标题】固定高度的全宽图像【英文标题】:Full width image with fixed height 【发布时间】:2014-01-12 20:39:56 【问题描述】:

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

这是我的html代码:

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

我应该使用什么 css 代码?

【问题讨论】:

请展示您对 css 的尝试。 【参考方案1】:

将图片的宽度设置为100%,图片的高度会自行调整:

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

如果您有自定义 CSS,那么:

HTML:

&lt;img id="image" src="..."&gt;

CSS:

#image

    width: 100%;

另外,您下次可以使用File -&gt; View Source,或者谷歌。

【讨论】:

感谢您的快速回复:) 但是如果我使用此代码,我会丢失图像的比例。 @user3132912 另外,我做了一个小的编码错误,我将.image 更改为#image,所以使用#image。另外,高度会自动调整,希望能解决您的问题。 谢谢,但如果你删除 height:50px 你的高度总是会改变,这取决于你的屏幕宽度。 @user3132912 那么你想做什么?有一次他们的屏幕大小就停止变化了吗? 谢谢伙计们,但我找到了:D #container background-image: url(../img/team/bgteam.jpg); background-repeat: no-repeat; background-position: center center; -webkit-background-size: cover; background-size: cover; padding-top: 450px; background-image: url(...); 【参考方案2】:

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

.container
  width:100%;
  height:60px;
  overflow:hidden;

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

   

【讨论】:

【参考方案3】:

为了不划伤您需要使用的图像:

max-height: 200px;
width: auto;

【讨论】:

很高兴能帮上忙 :)【参考方案4】:

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

来自班级

.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 的单独文件可以更轻松地管理整个事情。

【讨论】:

然后删除 height 属性。我看到你在我回答后发表了评论。 原始图像有多高?和图片本身一样?【参考方案5】:

设置父元素的高度,并给它宽度。然后使用规则为“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;
    

【讨论】:

【参考方案6】:

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

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

【讨论】:

从我编辑的答案中查看评论,然后编辑它显示 this 答案,这不仅仅是为了希望你能得到复选标记。 .. 抱歉,当我开始写这篇文章时,您的评论不存在。我会添加评论,但我不能,因为我还没有 50 代表。我并不想为某人的工作而功劳。【参考方案7】:
<div id="container">
    <img style="width: 100%; height: 40%;" id="image" src="...">
</div>

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

【讨论】:

【参考方案8】:

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

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

css

#image

width:100%;
height:

【讨论】:

对不起,我忘了把 40% 作为高度【参考方案9】:
#image 
  width: 100%;
  height: 100px; //static
  object-fit: cover;

【讨论】:

当用八个现有答案回答一个六年前的问题时,重要的是要指出你的答案所针对的问题的新方面,并且可能要注意你使用的任何技术是在问题之后引入的被问到.. 此外,仅代码的答案通常可以通过解释它们的工作方式和原因来改进。 感谢您指出我今天在 ionic 中遇到了同样的问题,上述解决方案都不适合我。所以我修复了我使用上面的代码。而且我不想将任何样式应用于父 div。没有一个答案使用object-fit: cover;,所以我想在这里分享。

以上是关于固定高度的全宽图像的主要内容,如果未能解决你的问题,请参考以下文章

Outlook '07/'10/'13 上的全宽背景

全宽(固定高度)响应youtube嵌入横幅

React-Native 图像高度(全宽)

div上的全宽背景颜色

javascript 使用jQuery划分视口的全宽/高度

如何将表格样式设置为容器的全宽并使单元格使用宽度的百分比?