vendredi 10 juin 2016

How to make an image responsive on PS4?


I was on the console viewing a site I was working on and noticed my banners looked off.

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

It looks fine on desktop, but when I view it on my PS4 it looks like the img had height:100%;, it looked squished. I expected it to behave the way it does on desktop, it takes 100% width of the screen and the height is hidden in the overflow. Given I'm viewing it on a TV I expected it to get a bit pixelated. Could it just be needing a very large image? The TV is 55".

Sort of a side question, but in the div that holds the image, I was trying to make the image vertically and horizontally centered in the "frame", how could I adjust my css to do so, if possible.


Aucun commentaire:

Enregistrer un commentaire