播放按钮大小

我怎能为中心的播放按钮，即使图像/视频尺寸改变了吗？播放按钮大小

.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

播放按钮大小

回答

相关问题