Question

我想始终设置相同的图像高度，并将图像边切割成页面宽度 - 我该如何实现它：）

    +- Page ----+
    |           |
+---+- Image ---+---+
|   |           |   |
|   |           |   |
|   |           |   |
+---+-----------+---+
    |           |
    +-----------+

我想用css剥离这个图像。

    +- Page ----+
    |           |
    +- Image ---+
    |           |
    |           |
    |           |
    +-----------+
    |           |
    +-----------+

如何实现它？

Answer 1

这是使用img标签的方法：

.img-wrap {
  overflow: hidden;
}
.img-wrap div {
  margin: 0 -1000px;
  text-align: center;
}

<div class="img-wrap">
  <div>
    <img src="http://dummyimage.com/1920x1280">
  </div>
</div>

Answer 2

确保图像宽度始终对应于页面宽度（或包含它的父元素的宽度）的常用方法是：

img {
width: 100%;
}

如果您希望相同的图像始终具有一致的高度，那么您将遵循基于单位的高度的相对父级宽度，如下所示：

img {
width: 100%;
height: 200px;
}

如果您保持图像的高宽比非常重要（因此，您不必介意丢失图像的边缘），请使用：

img {
height: 200px;
margin: 12px auto;
overflow-x: hidden;
}

Answer 3

我将使用以下两种方法之一：首先，隐藏body元素的溢出，然后将图像嵌套在宽度大于页面的元素中，然后将以下样式定义应用于该元素：

margin:auto;

其次，这仅用于显示目的，您可以将图像设置为页面的背景或与页面一样大的元素，然后，

background-size:cover;

Answer 4

如果我理解正确，您想知道如何在背景中居中图像，而不受浏览器视口宽度或高度变化的影响。

您可以使用以下CSS：

body { background: url(/path/to/img.png) center center no-repeat fixed; }

Answer 5

如果您希望图像适合水平放置屏幕，请使用：

img {
width: 100%;
}

如果您希望图片始终位于页面中心，请添加

img {
position: absolute;
top: 25%; //edit this to make your image farther from top of screen
}

注意：这只适用于你的img的父元素是body（或者宽度和高度等于屏幕的100％）

如何在HTML中剪切过宽的图像？

5 个答案: