英雄视频和图像以及各种设备
我实际上花了几个小时试图缩小我的英雄视频以适合WordPress页面的计算机屏幕。设置标准维度似乎仍在扩展。现在，我正在与Mobile的Hero Hoster图片作斗争。是否可以使用CSS来使图像的宽度适合设备的宽度？我真的很努力，希望提供一些帮助！
链接到网站： http://christap4.sg-host.com
I have literally spent hours trying to size my hero video to fit the computer screen for a wordpress page. Setting standard dimensions still seem to have it stretched. Now I am fighting with the hero poster image for mobile. Is there CSS that can be used to make the width of the image fit the width of the device? I am really at my wits end and would love some help!
Link to site: http://christap4.sg-host.com
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
从您的链接中，这就是我想到的。
要获得100％的屏幕宽度，您可以使用
宽度：100VW（vw = fiewport width）。我还包括accept-Ratio：1.77777778 < / code>（视频宽度 /视频高度），然后将高度设置为自动From your link this is what I came up with.
To get 100% of the screen width you can use
width: 100vw(vw = viewport width). I've also includedascpect-ratio: 1.77777778(video width / video height) and then set the height to auto看起来这里有几件事。
查看您的输出，看起来您已经过度复杂了解决方案。任何具有100％宽度的绝对位置的任何位置都将与最相对的父母一样宽（默认情况下）。
如果将宽度设置为100％，则可以使用fack-ratio设置高度（ https://developer.mozilla.org/en-us/docs/web/css/aspect-ratio ）。我不确定您在浏览器支持方面走了多远，但这将涵盖大多数用途。
另外，您可以给它一个固定的高度并使用对象合适的盖，但这会导致一些裁剪。
海报图像将仅继承与视频相同的维度。话虽如此，现在可以自动播放的视频可以自动播放，只要它们是正确的格式，并在其上设置了正确的属性。
Looks like there are a couple of things here.
Looking at your output it looks like you have over-complicated the solution. Anything that is position absolute with 100% width will be as wide as it's most relative parent (by default the body).
If you set the width to 100% you can set the height using aspect-ratio ( https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio ). I'm not sure how far back you are going in browser support but this will cover most uses.
Alternatively you can give it a fixed height and use object-fit cover but this will cause some cropping.
The poster image will just inherit the same dimensions as the video. That being said short videos can now autoplay providing they are the right format, muted and have the right attributes set on them.