Question

很抱歉，如果已经提出这个问题，但我不确定是否有正确的措辞，所以我无法进行搜索。我有一个宽度非常大的图像，我希望它在使用较小的分辨率时离开浏览器窗口，如果你有更高的分辨率，它将显示更多的图像（宽度明智，高度，高度需要保持不变），这样无论你正在浏览什么分辨率，图像仍然是相同的高度，所以页面内容将保持大致相同。只需将其与img标签放在一起即可调整整个图片以适应浏览器窗口，从而更改过程中的高度。下面是我想要发生的非常粗略的图表。

Image Diagram

Answer 1

简单的选项是将overflow: hidden;添加到图像容器中。例如。 http://codepen.io/pageaffairs/pen/Etikh

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.wrap {width: 60%; margin: 0 auto; background: ##e7e7e7; padding: 20px;}
.container {overflow: hidden;}

</style>
</head>
<body>
<div class="wrap">
    <div class="container">
        <img src="http://placehold.it/1024X600" alt="">
    </div>
</div>

</body>
</html>

Answer 2

使用此代码：

CSS：

.container {
    width:100%;
    height:100%;
    position:fixed !important;
    top:0;
    left:0;
    background-color:red;
    right:0;
    bottom:0;
}
.container img {
    height:inherit;
    width:100%;
}

容器为fixed，宽度和高度均为100％，其顶部，左侧，右侧，底部值均设置为零像素。容器中的img继承容器块中设置的高度，但宽度为100％。 HTML：

<div class="container">
    <img src="http://placehold.it/1024X768">    
</div>

JsFiddle：

http://jsfiddle.net/CVNf9/

Answer 3

我认为这是你正在寻找的东西：

.image-mask {
  margin: 10px;
  border: dotted 2px red;
  overflow: hidden;
}
.image-mask img {
  display: block;
  width:1024px;
  height:768px;
}

<div class="image-mask">
  <img src="http://yourdomain.com/images/yourimage.png">
</div>

如果需要，在.image-mask上设置最大宽度（例如，如果它有一个你想要显示的实际边框或其他东西），以防止它变得比图像宽度大，或者设置margin: 0 auto使其居中等等。

小提琴：http://jsfiddle.net/Aj59Z/2/

Answer 4

就这么简单：

img {
  width: 1000px; /* Width of your img */
  height: 600px; /* Height of your img */
}

要避免使用水平滚动条，请使用某个元素包装图像，并将溢出属性设置为隐藏，宽度设置为 100％

的jsfiddle
http://jsfiddle.net/SVxJ4/1/

调整图像宽度，但保持相同的高度

4 个答案: