0

抱歉，如果已经有人问过这个问题，但我不确定正确的措辞，所以我无法搜索。我有一个在宽度方面非常大的图像，我希望它在使用较小的分辨率时离开浏览器窗口，如果你有更大的分辨率，它将显示更多的图像（仅限宽度，高度需要保持不变），这样无论您以什么分辨率浏览都无关紧要，图像仍然是相同的高度，因此页面内容将基本保持不变。只需将其与 img 标签一起调整整个图片以适应浏览器窗口，并在此过程中更改高度。下面是我想要发生的事情的非常粗略的图表。

图像图

4

4 回答 4

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>
于 2013-06-16T00:36:02.083 回答
0

我想这就是你要找的：

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

于 2013-06-16T00:40:29.360 回答
0

使用此代码：

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%;
}

容器是fixed100% 的宽度和高度，其顶部、左侧、右侧、底部的值都设置为零像素。容器中的 img 继承了容器块中设置的高度，但宽度为 100%。HTML：

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

JsFiddle：

http://jsfiddle.net/CVNf9/

于 2013-06-16T00:27:51.127 回答
-1

就如此容易：

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

为了避免水平滚动条，用一些元素包裹你的图像并将其溢出属性设置为隐藏，宽度为100%

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

于 2013-06-16T00:31:54.810 回答