我试图从youtube显示图像显示内容大小的视频
height:180px width :270px
例如:
我想要显示这样的图像
在互联网上搜索答案
How to automatically crop and center an image
这个最有帮助,但我不能使用background-image标签.我希望它在标签中
CSS Display an Image Resized and Cropped
任何人帮我解决这个问题.谢谢
解决方法
更新
我已经更新了答案,但我不确定你想要什么,你只是说了你不想要的.所以我假设你想要:
>保持纵横比
>避免种植
>没有黑条,只是图像边缘到边缘
我们知道这是一张纵横比为16:9的宽屏海报,所以如果您想要宽度为270像素,请执行以下操作:
将宽度除以16
270/16 = 16.875
取该商并乘以9
16.875 * 9 = 151.875
向上或向下舍入
Round up to 152px
使用结果更改高度,然后应用object-fit:cover
152px is the height of an image that's 270px wide and has an aspect ratio of 16:9.
编辑
为了反映更新并更好地理解OP的目标,编辑了此代码段.
object-fit是一个简单的CSS属性.请参阅此article下面的代码段已注释.顺便说一句,这个代码片段中你需要的唯一代码就是对象:cover,其余的样式和标记仅用于演示.
片段
/* We kNow this is a widescreen poster with the aspect ratio of 16:9,so if you want a width of 270px,do the following: 270/16 = 16.875 16.875 * 9 = 151.875 Round up to 152px 152px is the height of an image that's 270px wide and has an aspect ratio of 16:9 */
.bg1 { width: 270px; height: 152px; object-fit: cover; outline: 2px dashed blue; } .bg2 { width: 270px; height: 152px; object-fit: contain; outline: 2px dashed blue; } .bg3 { width: 270px; height: 152px; outline: 2px dashed blue; } aside { height: 100%; width: 40%; display: inline-block; position: absolute; right: 0; top: 0; } figure { height: 180px; width: 270px; max-width: 50%; } .pointer { position: absolute; } .pointer b { font-size: 32px; } #a.pointer { top: 43%; left: 52%; } #b.pointer { bottom: 5%; left: 52%; } .Box { width: 600px; height: 450px; position: relative; } .spacer { position: relative; padding: .1% 0; width: 2px; } code { font-family: Consolas; color: red; }
<section class="Box"> <figure> <figcaption>object-fit: cover</figcaption> <img class="bg1" src="http://img.youtube.com/vi/MzMqjG9om18/hqdefault.jpg" /> </figure> <!--<div class="pointer" id="a"><b>⬅</b> <br/>Space</div>--> <figure> <figcaption>object-fit: contain</figcaption> <img class="bg2" src="http://img.youtube.com/vi/MzMqjG9om18/hqdefault.jpg" /> </figure> <figure> <figcaption>Without anything but the height property</figcaption> <img class="bg3" src="http://img.youtube.com/vi/MzMqjG9om18/hqdefault.jpg" /> </figure> <aside> <p><code>object-fit: cover</code> will stretch an image to the edges of it's container (parent element) while keeping aspect ratio and cropping.</p> <p>But when given the correct dimensions,<code>object-fit: cover</code> will result in a perfect fit edge to edge. No cropping either.</p> <div class="spacer"> </div> <p><code>object-fit: contain</code> will stretch an image to the edges of it's container while keeping aspect ratio but will not crop at the edges,so as you can see,this image has space left and right. At wider dimentions,the space will manifest below and above.</p> <div class="spacer"> </div> <p>This is the image when set to it's aspect ratio at 270 x 152px and as you can see,without <code>object-fit:cover</code>,math alone will not resolve the problem.</p> </aside> <!--<div class="pointer" id="b"><b>⬅</b> <br/>Space</div>--> </section>