Question

我们有一个学校项目，我们将建立一个网站。我有一个＆＃34;问题＆＃34;与图像。有点难以解释这个问题，但我会尝试上传一个视频，试图让它更容易理解。我想要做的是当图像在高度上缩放时，使图像在宽度上不缩放。在我拖动窗口的那一刻，女巫的高度发生变化，图像宽度发生变化，图片看起来真的很糟糕。看看这个视频，看看你的自我。

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>

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

<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>

希望这有帮助！

需要网站图片帮助

2 个答案: