需要网站图片帮助

Question

我们有一个学校项目，我们将制作一个网站。我有一张带图片的 "problem"。很难解释这个问题，但我会尝试，我已经上传了一段视频，试图让它更容易理解。我想要做的是使图像在按高度缩放时不按宽度缩放。在我拖动 window 的那一刻使高度改变图像宽度改变并且图片看起来非常糟糕。看看这个视频，亲眼看看。

https://www.youtube.com/watch?v=9ybm9rlast0

我希望图片像在 gmail 中一样工作。提前致谢！

Answer 1

下面是通常如何实现响应式图像的示例。

/* Typical responsive image CSS */
img {
  display: block;
  max-width: 100%;
  height: auto;
}
.container {
  width: 75%;
}
.left,
.right {
  float: left;
}
.left {
  width: 40%;
}
.right {
  width: 60%;
}

<div class="container">
  
  <div class="left">
    <img src="http://placehold.it/600x300/fc0/">
  </div>
  
  <div class="right">
    
    <p>
      Black jack lateen sail fire in the hole Arr coxswain topgallant Gold Road sloop lugger cackle fruit parley spanker. Fathom barque fore tackle fluke Shiver me timbers Sea Legs overhaul long clothes fire in the hole furl Admiral of the Black. Lateen sail rum capstan tack provost swing the lead scurvy overhaul cutlass dance the hempen jig tackle bilge rat.
    </p>
    
  </div>

</div>

Answer 2

我想说最简单的方法是使用 background-size: cover;对于你的问题。首先，创建一个元素来承载您选择的图像。在我的示例中，我使用了 div 并为它指定了一个 id 用于样式设置。

<body>
    <div id="resize"></div>
</body>

然后在 header 标签中添加以下内容：

<head>
    <style type="text/css">
        #resize{
            background-image: url("image-goes-here"); /*inject image here*/
            background-size: cover;
            height: 500px; /*desired height size*/
            width: 50%; /*desired width size*/
        }
    </style>
</head>

希望对您有所帮助！

需要网站图片帮助

Website image help needed

html

css

height

image

width