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上查看它时，看起来img有height:100%;，它看起来很压扁。我希望它的行为与它在桌面上的行为一样，它需要100％的屏幕宽度，高度隐藏在溢出中。鉴于我在电视上观看它，我预计它会有点像素化。它只是需要一个非常大的图像？电视是55英寸。

一个侧面问题的排序，但是在保存图像的div中，我试图使图像在“框架”中垂直和水平居中，如果可能的话，我如何调整我的css这样做。

Answer 1

Playstation使用的浏览器可能不支持视口单元。视口单元正在获得所有现代浏览器的支持，但是，在某些情况下，不支持此单元或找到了错误。

尝试将html和body标记的高度设置为100％。然后设置你的博客后期精选横幅＆＃34;高度为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的浏览器。

如何使图像响应PS4？

2 个答案: