【问题标题】: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 的尝试。

标签: html css image width cover


【解决方案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" alt="Our Location" /> 
</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;,所以我想在这里分享。
        猜你喜欢
        • 2016-08-17
        • 2012-12-30
        • 2012-01-23
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多