播放按钮以不同的图像

播放按钮以不同的图像

本文介绍了播放按钮以不同的图像/视频大小为中心的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如果图片/视频大小改变,我如何保持播放按钮居中?

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



HTML本质上是您的:

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

我使用的演示图片具有可配置的尺寸,例如200x150, p>

示例1 - 图片大小决定父容器的大小



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

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

/ *获取除了内联元素之外的额外空白空间* /
.image img {
vertical-align:bottom;
}

如果您想要 .image div缩小以适合图像,使用 inline-block 显示。
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 - 父容器具有全宽和指定高度



在这个例子中,我让父容器填充窗口的宽度,并将
的高度设置为200px。要获得垂直居中,我将 margin-top 设置为硬编码值,这将取决于图像的高度。如果您让图片采用固定高度,则此示例非常有用。

  .ex3.image {
position :相对;
display:block;
width:auto;
height:200px;
text-align:center;
}

.ex3.image a {
margin-top:25px;
}


How can I keep the play button centred even if the the image/video size changed?

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

Here is my example...

Attention: my images/videos haven't no specific size, so they can change according to their own size... This is just an example!

解决方案

I set up three examples to show how you could solve this problem.

Please see the fiddle: http://jsfiddle.net/audetwebdesign/mxSkQ/

The HTML is essentially yours:

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

I am using a demo image with configurable dimensions, 200x150 for example, easily changed for testing.

Example 1 - Image Size Determines Size of the Parent Container

.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;
}

If you want the .image div to shrink to fit the image, use inline-block to display.The margin-left is optional, will depend on the rest of the layout.

Important: To center the play button motif, simply set the a tag to display as inline-block and your arrow-motif-span will position itself nicely.

Because img is an inline element, browsers insert a small space after it that can show up if you have borders or backgrounds. Use vertical-align: bottom to clean that up.

Example 2 - Parent Container Has A Specified Width

You can specify a width for the .image parent container and then use text-align to position the image element.

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

Example 3 - Parent Container Has Full Width and Specified Height

In this example, I let the parent container fill up the width of the window and set theheight to 200px. To get vertical centering, I set margin-top to a hard-coded value that will depend on the height of the image. If you let the image take on a fixed height, this example is useful.

.ex3.image {
    position: relative;
    display: block;
    width: auto;
    height: 200px;
    text-align: center;
}

.ex3.image a {
    margin-top: 25px;
}

这篇关于播放按钮以不同的图像/视频大小为中心的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 11:59