Solved How to fix size of photos & videos NodeBB

[cagatay]

hi
how we can fix size of shared photos and videos ?

[phenomlab]

@cagatay Can you give me a bit more information? It’s not entirely clear what you are looking for from your post.

[cagatay]

@phenomlab my forum showed posts which has photos and youtube videos are very big size. i want to fix it for example 100x100px not more then it.

this is mine

this is yours

[crazycells]

@cagatay @phenomlab Actually, this is something we are having a problem with.

picture/photo is transformed, but, it does not look good either on mobile or on a computer. Usually, the scale is huge for the desktop view but good for the mobile view, or ok with the desktop view, but the quality of the photo is significantly dropped on mobile.

How can you achieve good scaling with max quality for both mobile and desktop views?

[phenomlab]

@crazycells @cagatay I’d suggest something like the below - essentially using percentages, as they will scale much better

@media (min-width: 1200px) {
.topic .posts .content .img-responsive {
    max-width: 25%;
    width: auto;
    padding: 20px;
}
}

[crazycells]

@phenomlab said in How to fix size of photos & videos NodeBB:

@crazycells @cagatay I’d suggest something like the below - essentially using percentages, as they will scale much better

@media (min-width: 1200px) {
.topic .posts .content .img-responsive {
    max-width: 25%;
    width: auto;
    padding: 20px;
}
}

thanks this is a very smart solution…

[phenomlab]

@crazycells pleasure. Using percentages makes much more sense in this case. It’s the same argument with px vs pt vs em with fonts, margins, padding, etc., in the sense that em is generally preferred over px and pt

Why em instead of px?

I heard you should define sizes and distances in your stylesheet with em instead of in pixels. So the question is why should I use em instead of px when defining styles in CSS? Is there a good exam...