如何使图像在PS4上响应？

Question

我在控制台上查看我正在工作的一个网站时，注意到我的横幅看起来很不对劲。

<div class="blog-post-featured-banner">
        <img width="1600" height="900" src="#">
</div>

.blog-post-featured-banner {
    height: 50vh;
    overflow: hidden;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.blog-post-featured-banner img {
    width: 100%;
    height: auto;
}

它在桌面上看起来很好，但当我在我的PS4上查看它时，它看起来像是有height:100%;，它看起来被压扁了。我预计它会像在桌面上一样工作，它占用100%的屏幕宽度，高度隐藏在溢出中。考虑到我是在电视上看的，我希望它会有点像素化。它可能只需要一个非常大的图像吗？这台电视机是55英寸。

这是一个次要的问题，但在包含图像的div中，我试图使图像在“框架”中垂直和水平居中，如果可能的话，我如何调整我的css才能做到这一点。

Answer 1

Playstation使用的浏览器可能不支持视口单位。视口单元在所有现代浏览器上都获得了支持，但是，在某些情况下，该单元不受支持或发现了错误。

尝试将html和body标记的高度设置为100%。然后将你的“博客-帖子-特色-横幅”高度设置为50%。这应该会复制您当前正在尝试实现的目标。

<div class="blog-post-featured-banner">
     <img width="1600" height="900" src="#">
</div>

html, body {
    height: 100%
}

.blog-post-featured-banner {
    height: 50%;
    overflow: hidden;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.blog-post-featured-banner img {
    width: 100%;
    height: auto;
}

Answer 2

我让一个朋友看了这个。我的次要问题导致了答案，并不是说你们的回答是不正确的，但这就是我想要的。

<div class="blog-post-featured-banner">
        <div class="featured-banner" style="background: url(<?php the_post_thumbnail_url( 'full' ); ?> ) no-repeat center center; background-size: cover;">
</div>

.blog-post-featured-banner {
    height: 50vh;
    overflow: hidden;
    position: relative;
}
.featured-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

50vh似乎可以在PS4的浏览器上运行。