当元素里面有绝对位置时的CSS边距

我处于一个相当恼人的境地...... 我认为这是最好的展示我所做的并告诉你什么是问题，而不是解释一切。当元素里面有绝对位置时的CSS边距

我一直在寻找一种解决方案，但我找不到它。

如果你去http://jsfiddle.net/bd3Ms/，你会看到一个带有h1标签和内部图像的三个盒子。我已经用CSS剪裁了图像（这必须以这种方式完成，无法解决这个问题）。我试图将图像置于框中，但我无法做到这一点。我认为这是因为img元素的绝对定位。

代码：

<html> 
<head> 
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> 

    <style type="text/css"> 
     .photo-div { 
      overflow:auto; 
      height:250px; 
      border: 1px solid #000; 
     } 

     .photo-div-content { 
      width:100%; 
      margin:0 auto; 
     } 

     img.clipped { 
      position:absolute; 
      clip:rect(0px,200px,200px,0px); 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div id="div-1" class="photo-div span4"> 
       <div class="photo-div-content"> 
        <h1>Logitech Mouse</h1> 
        <img class="clipped" src="https://www.google.nl/images/srpr/logo3w.png"> 
       </div> 
      </div> 
       <div id="div-2" class="photo-div span4"> 
       <div class="photo-div-content"> 
        <h1>Logitech Mouse</h1> 
        <img class="clipped" src="https://www.google.nl/images/srpr/logo3w.png"> 
       </div> 
      </div> 
      <div id="div-3" class="photo-div span4"> 
       <div class="photo-div-content"> 
        <h1>Logitech Mouse</h1> 
        <img class="clipped" src="https://www.google.nl/images/srpr/logo3w.png"> 
       </div> 
      </div> 
     </div> 
    </div> 
</body>

我使用Twitter的引导和网站，我的建筑将是充分响应，所以只将边缘，左边是对我不起作用。

我希望我能够弄清楚问题所在。

在此先感谢您的帮助！

来源

2013-02-21 Ivo van Beek

我用CSS sprite的相同技巧做了它。

.photo-div-content{ 
    background: 'url('IMG URL') repeat scroll -0px -0px transparent'); 
    height: 200px; 
    width: 200px; 
    margin: 0 auto; 
}

现在我认为这是实现我的目标的最佳方式：使用CSS在div中间显示图像的一部分。

来源

2013-02-21 22:05:15

如果问题解决了，你应该接受你的答案。 – JSuar 2013-03-07 16:55:38

怎么不裁剪和居中图像？

img.clipped { 
    background:url(https://www.google.nl/images/srpr/logo3w.png) center center no-repeat; 
}

活生生的例子：http://jsfiddle.net/bd3Ms/1/

更多的选择在这里：

绝对中心（垂直&水平）的图像
http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/
创建缩略图使用CSS剪辑属性：
http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html

来源

2013-02-21 20:06:19 JSuar

如果我正确理解你的问题，你想中心文本和剪辑图像。看看是否有帮助：http://jsfiddle.net/panchroma/7Lq6B/

重要的是，我已经将图像封装在与裁剪尺寸相同的居中的div中。

CSS

.img-wrap{ /* dimensions should match clipping size */ 
width:200px; 
height:200px; 
margin:0 auto; 
}

HTML

<div id="div-2" class="photo-div span4"> 
<div class="photo-div-content"> 
<h1>Logitech Mouse</h1> 
<div class="img-wrap"> 
<img class="clipped" src="https://www.google.nl/images/srpr/logo3w.png"></div> 
</div> 
</div>

祝你好运！

来源

2013-02-21 20:45:36

由于图像绝对定位，你有更多的选择来玩。试试这个：

img.clipped { 
    position: absolute; 
    left: 50%; 
    margin-left: -25%; 
    clip:rect(0px,200px,200px,0px); 
}

这不是漂亮的代码，但它在父div的中间。

来源

2013-02-21 20:59:05 deau

当元素里面有绝对位置时的CSS边距

回答

相关问题