使用CSS / Javascript进行自适应图像大小调整/裁剪

Fusiqos

我正在尝试重新创建响应式图像大小调整器/裁剪器,如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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用paper.js进行自适应大小调整

来自分类Dev

使用Asp.net和CSS的自适应图像大小调整

来自分类Dev

CSS-自适应-调整浏览器的宽度时裁剪背景图像的左右部分

来自分类Dev

使用CSS调整大小和裁剪图像

来自分类Dev

使用CSS调整图像的裁剪部分的大小

来自分类Dev

自适应大小调整

来自分类Dev

如何在Magento中的任何图像上使用自适应调整大小?

来自分类Dev

如何在Magento中的任何图像上使用自适应调整大小?

来自分类Dev

自适应AdSense广告的尺寸随着屏幕方向的变化而调整大小(使用Bootstrap进行布局时)

来自分类Dev

CSS:自适应矩形:Div在调整大小时被剪切

来自分类Dev

如何使用Jquery / javascript根据视图端口大小调整图像大小

来自分类Dev

CSS Flex:根据图像大小调整Flex框的大小

来自分类Dev

使用 graphicsmagick 调整大小和裁剪图像

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用CSS / jQuery的自适应字体大小

来自分类Dev

使用ImageResizer调整图像大小和裁剪图像

来自分类Dev

使用更少的CSS根据屏幕大小调整视频大小

来自分类Dev

如何使用CSS进行这种自适应布局?

来自分类Dev

使用CSS调整不断变化的图像大小以适应不断变化的屏幕

来自分类Dev

我正在尝试使用 css 调整图像大小以适应移动设备,但它不起作用

来自分类Dev

背景应在窗口大小调整时使用JQuery适应内容高度

来自分类Dev

容器应仅针对自适应设计CSS自动调整为背景图像的高度

来自分类Dev

自适应字体大小调整-适合容器

来自分类Dev

CSS图像裁剪大小

来自分类Dev

以编程方式使用自适应布局来调整hCompact静态单元格高度的大小

来自分类Dev

如何使用 jCrop 调整图像大小以适应所有纵横比?

来自分类Dev

使用javascript调整图像大小

Related 相关文章

  1. 1

    使用paper.js进行自适应大小调整

  2. 2

    使用Asp.net和CSS的自适应图像大小调整

  3. 3

    CSS-自适应-调整浏览器的宽度时裁剪背景图像的左右部分

  4. 4

    使用CSS调整大小和裁剪图像

  5. 5

    使用CSS调整图像的裁剪部分的大小

  6. 6

    自适应大小调整

  7. 7

    如何在Magento中的任何图像上使用自适应调整大小?

  8. 8

    如何在Magento中的任何图像上使用自适应调整大小?

  9. 9

    自适应AdSense广告的尺寸随着屏幕方向的变化而调整大小(使用Bootstrap进行布局时)

  10. 10

    CSS:自适应矩形:Div在调整大小时被剪切

  11. 11

    如何使用Jquery / javascript根据视图端口大小调整图像大小

  12. 12

    CSS Flex:根据图像大小调整Flex框的大小

  13. 13

    使用 graphicsmagick 调整大小和裁剪图像

  14. 14

    使用CSS调整图像大小

  15. 15

    使用CSS调整图像大小

  16. 16

    使用CSS调整图像大小

  17. 17

    使用CSS / jQuery的自适应字体大小

  18. 18

    使用ImageResizer调整图像大小和裁剪图像

  19. 19

    使用更少的CSS根据屏幕大小调整视频大小

  20. 20

    如何使用CSS进行这种自适应布局?

  21. 21

    使用CSS调整不断变化的图像大小以适应不断变化的屏幕

  22. 22

    我正在尝试使用 css 调整图像大小以适应移动设备,但它不起作用

  23. 23

    背景应在窗口大小调整时使用JQuery适应内容高度

  24. 24

    容器应仅针对自适应设计CSS自动调整为背景图像的高度

  25. 25

    自适应字体大小调整-适合容器

  26. 26

    CSS图像裁剪大小

  27. 27

    以编程方式使用自适应布局来调整hCompact静态单元格高度的大小

  28. 28

    如何使用 jCrop 调整图像大小以适应所有纵横比?

  29. 29

    使用javascript调整图像大小

热门标签

归档