當元素裏面有絕對位置時的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邊距

回答

相關問題