我正在尝试重新创建响应式图像大小调整器/裁剪器,如https://www.djhardwell.com/上的新闻快报中所述。我试图用DOM-explorer重新创建代码,但是它不起作用。
它甚至不显示图像(将图像设置在主体中时会显示图像,因此路径正确)。我在其他任何地方都找不到这样的大小调整器/裁剪器,这看起来非常不错。这么多的代码可能不是必需的,但是现在是这样的:
HTML:
<!doctype html>
<html>
<head>
<title></title>
<link href="styles.css" rel="stylesheet" type="text/css">
<body>
<div id="container">
<!--<div id="header">
img src="images/fullhdlogo.png" class="logo">
</div> -->
<div id="container1">
<div id="container2">
<div id="container3">
<div id="container4">
<div id="container5">
<div id="container6">
<div id="container7">
<div id="imagecontainer" style="background-image: url (images/fullhdlogo.png);>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing:border-box;
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
#container {
}
#header {
width: 200px;
height: 100vh;
background-color: #62EF7F;
}
#container1{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing:border-box;
}
#container2{
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
padding-top: 60px;
padding-bottom: 40px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility:hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing:border-box;
}
#container3{
position: relative;
width: 100%;
height: 100%;
min-height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing:border-box;
}
#container4{
position: fixed;
z-index: 10;
top: 60px;
left: 0;
bottom: 40px;
padding-right: 5px;
width: 66%;
}
#container5 {
position: absolute;
width: 100%;
height: 100%;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing:content-box;
overflow: hidden;
background-color: inherit;
}
#container6{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
background-color:inherit;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing:border-box;
}
#container7{
position: relative;
width: 100%;
height: 90%;
display: block;
background-repeat: no-repeat;
background-position: center center;
}
imagecontainer {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: no-repeat center center;
background-size: cover;
}
对于大小调整器/裁剪器问题,我将进行调查background-size:cover
。从那里,您只需要一个常规的滑块即可更改背景图像。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句