固定高度的全宽图像
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:
<img id="image" src="...">
CSS:
#image
width: 100%;
另外,您下次可以使用File -> 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;
,所以我想在这里分享。以上是关于固定高度的全宽图像的主要内容,如果未能解决你的问题,请参考以下文章