Question

我正在尝试重新创建一个响应式图像缩放器/裁剪器，就像在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;

 }

Answer 1

对于缩放器/裁剪器问题，我会查看background-size:cover。从那里，你只需要一个改变背景图像的常规滑块。

使用CSS / Javascript调整响应图像大小/裁剪

1 个答案: