如何裁剪图像以使其适合屏幕的50％？-Java 学习之路

我需要图像适合 screen height of the device 和 not 50% of the current screen size 的50％（用户可能已将屏幕最小化） . 此外，当用户调整屏幕大小时，我不希望图像在最初渲染时自动适应屏幕 .

图像非常大，我期待 crop 和 not resize 它 . 这是我到目前为止所做的：

home.html的：

<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>      
<img class="image" src="myimage.jpg" alt="">
</body>
</html>

home.css：

html, body {
margin:0;
border:0;
padding:0;
}

img.image {
width:100%;
}

我不想使用除HTML，CSS和JavaScript之外的任何东西 . 如果有人帮助我理解如何在CSS中完成这项工作会很棒 . 谢谢！

3 回答

2

考虑使用css clip property .

将剪辑与一点JavaScript组合以获得屏幕尺寸可能只是正确的解决方案 .

回复于 2024-04-25T15:59:38+08:00

要裁剪图像，您需要一个带溢出的容器：隐藏 . DEMO /示例：

html, body {
  height:100%;
  margin:0;
}
.crop50h {
  height:50%;
  overflow:hidden;
}
/* some specific behavior for image ? */
.crop50h {
  text-align:center;
}
.crop50h img {
 /* width:100%;  ? */
  margin:0 -100%;
  min-width:100%;
}

Wit html基础：

<div class="crop50h">
    <img src="http://lorempixel.com/1200/1200/"/>
</div>

回复于 2024-04-25T15:59:38+08:00

0
如果我要求将图像设置为桌面窗口的50％，那么 not 浏览器窗口 .

在这种情况下，您可以在Javascript中使用 window.screen.availHeight 来获取可用高度：
```
var half = window.screen.availHeight / 2;
var image = document.getElementByClassName("image")[0];

image.width=(half)+"px";
```
回复于 2024-04-25T15:59:38+08:00

如何裁剪图像以使其适合屏幕的50％？

3 回答

相关问题