播放按鈕大小

我怎能爲中心的播放按鈕，即使圖像/視頻尺寸改變了嗎？播放按鈕大小

.image{ 
    position:relative; 
    width:500px; //changed 
    height:300px; 
}

Here是我的榜樣......

注意：我的圖像/視頻沒有沒有具體的尺寸，這樣他們就可以改變根據自己的尺碼......這只是一個例子！

來源

2013-04-03 zppinto

你想讓你的圖像，以確定'.image'容器的寬度和/或高度，或者你想要的形象融入'.image'當'.image'已指定的尺寸？這個問題可以通過幾種方法解決。你能告訴我們更多嗎？ –

我希望圖像適合'.image'！然而，尺寸不是在CSS代碼中指定的，就像在我的示例中發生的一樣。圖片是根據自己的尺寸顯示的，所以它們可以有任何尺寸...... – zppinto

你對於SO相對比較陌生，我發現你問了幾個問題並得到了很好的答案。接受一些你認爲很好的答案，然後投票支持你的其他答案。信譽積分是我們互相幫助的唯一付款。謝謝。 –

我成立了三個例子來告訴你如何能解決這個問題。

請參閱小提琴：http://jsfiddle.net/audetwebdesign/mxSkQ/

的HTML基本上是你的：

<div class ="image ex1"> 
    <a href="#"> 
     <img src="http://placehold.it/200x150" alt="video"> 
     <span class="play"> 
      <span></span> 
     </span> 
    </a> 
</div>

我使用的演示圖像具有可配置的尺寸，200x150例如，容易改變進行測試。

示例1 - 如果你想在.image div來縮小以適合圖像，使用inline-block顯示影像尺寸決定父容器

.ex1.image { 
    position: relative; 
    display: inline-block; 
    margin-left: 50px; 
} 

.image a { 
    display: inline-block; 
    position: relative; 
} 

/* Gets rid of the extra white space that follows an inline element*/ 
.image img { 
    vertical-align: bottom; 
}

的大小。 margin-left是可選的，將取決於其餘的佈局。

重要：要居中播放按鈕圖案，只需將a標籤顯示爲inline-block和您的箭頭圖案跨度本身將很好地定位。

因爲img是一個內聯元素，瀏覽器插入後，一個小的空間，可顯示如果您有邊框或背景。使用vertical-align: bottom清理。

實施例2 - 父容器具有指定的寬度

可以指定爲.image父容器的寬度，然後使用text-align到圖像元素位置。

.ex2.image { 
    position: relative; 
    display: inline-block; 
    width: 400px; 
    height: auto; 
    text-align: center; 
}

實施例3 - 父容器具有最大寬度和指定的高度

在本例中，我讓父容器填滿窗口的寬度和高度設定爲200像素。爲了獲得垂直居中，我將margin-top設置爲硬編碼值，這取決於圖像的高度。如果您讓圖像具有固定高度，則此示例非常有用。

來源

2013-04-03 11:51:01

謝謝您的解釋Marc！我試圖在我的真實案例中實現它，但沒有成功，因爲播放按鈕保持固定位置。你可以看看嗎？這裏是http://jsfiddle.net/dzfsX/2/ – zppinto

我很樂意幫助你。您的修改值得另一個問題。請打開另一個問題，並將鏈接發佈到您的新問題。佈局是不同的，需要一些調整。首先，如果您還沒有這樣做，請在接受投票後接受此答案。然後我會尋找你的新問題並回答它。謝謝。 –

新鏈接的鏈接http://stackoverflow.com/questions/15795057/css-play-button-image-centred-and-on-top-of-video-div-according-to-different-vi謝謝 – zppinto

提供的圖像CSS：

display: block; 
margin: 0 auto;

這只是你把東西在中間的通用方法。

除非我失去了一些東西，也許？

來源

2013-04-03 10:43:26 Barney

這不行！如果您嘗試更改圖片尺寸，則播放按鈕保持在相同位置，並且不會根據圖片尺寸「移動」... – zppinto

你需要

top: 50%; 
left: 50%; 
margin: -25px 0 0 -25px; // top and left equal to half of the size * (-1)

http://jsfiddle.net/nGKcn/13/

嘗試與圖像尺寸/不同的圖像播放。

來源

2013-04-03 10:50:42 Kaloyan

播放按鈕大小

回答

相關問題