我需要图片适合设备的 屏幕高度的50% 和 不是当前屏幕尺寸的50% (用户可能已将屏幕最小化)。此外,当用户调整屏幕大小时,我不希望图像在最初渲染时自动适应屏幕。
图片非常大,我希望裁剪,不调整大小。这是我到目前为止所做的:
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中完成这项工作会很棒。谢谢!
答案 0 :(得分:3)
考虑使用css clip property。
将剪辑与一些JavaScript组合以获得屏幕尺寸可能只是正确的解决方案。
答案 1 :(得分:2)
要裁剪图像,您需要一个带溢出的容器:隐藏。 DEMO / example:
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>
答案 2 :(得分:0)
如果我已正确阅读您的问题,我相信您要求将图片设置为桌面窗口的50%, 不 浏览器窗口。
在这种情况下,您可以在Javascript中使用window.screen.availHeight
来获取可用的高度:
var half = window.screen.availHeight / 2;
var image = document.getElementByClassName("image")[0];
image.width=(half)+"px";