如何裁剪图像以适应屏幕中所需的高度？

提问于 2024-04-28T21:49:16+08:00

浏览次

0

我有一个大图像，其高度大于屏幕高度 . 我对宽度没问题 . 我需要裁剪它，以便屏幕的前65％包含此图像 .

<body>
<img class="img" src="image.jpg" alt="img">
<p>Description</p>
</body>

如果我按如下方式编写CSS，整个图像将被压缩以适应65％的屏幕 . 此外，如果我调整屏幕大小，图像会自动开始尝试适应前65％，使整个屏幕看起来不安 .

body, html { height:100% }
img.img { height:65% }

我想要的是，要裁剪图像，使剩下的符合65％，然后保持这种状态 . 也就是说，如果我现在调整窗口大小，请显示垂直滚动条 . 我怎样才能做到这一点？

（PS：我不想给出固定的高度，因为我希望在手机和iPad等不同的设备上查看网页 .

我想这就是我需要的：

获取设备的最大高度（不是浏览器屏幕的当前高度，因为用户可能因某种原因将其最小化）
以适合前65％的方式裁剪图像，并显示它
无论用户更改屏幕大小，都保持图像大小

但我不知道如何实现它 . ）

2 回答

1
这是你在寻找的：http://jsfiddle.net/JjwMw/1/
```
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    height: 65%;
    width: 100%;
    position: relative;
    top: -22.75%; /* 65*35/100 */
    background-image: url(http://placehold.it/1024x768);
    background-size: cover;
    background-position: center bottom;
}
```
请注意，图像现在是背景图像，并且正在利用IE8中不支持的background-size属性（...谁在乎？） . 如果图像不能是背景图像，则使用填充黑客（Proportionally scale a div with CSS based on max-width (similar to img scaling)）按比例缩放div以填充宽度，并将内部图像设置为100％宽度和高度 .
回复于 2024-04-28T21:49:16+08:00
0

也许这对你有用：http://demo.solemone.de/overflow-image-with-vertical-centering-for-responsive-web-design/

此外，在这里或谷歌搜索css剪辑属性应该带来足够的信息

回复于 2024-04-28T21:49:16+08:00

相关问题