I have a page with flexbox elements. Elements have picture but as the picture is for different devices it has different scale factor. What is the best option for design to be still functional but still show pictures in some nice manner?

/EDIT/ I am sorry, I see I did not describe a problem well.

for different devices -> is actually mentioned a content in flexbox element. I have a row with 4 flexbox elements, a single element contains a picture, but the pictures are in different scale factors. So I don't know whats is best, to zoom the picture and crop it, or set a stretching or something.

  • 1
    Oh, now I see. So you have something like on this page => w3schools.com/Css/css3_flexbox.asp ? – Sylwester Pilarz Jun 14 '18 at 10:06
  • Yes! and the problem is that elements of flexboxes are pictures, I dont know how to design to be nice for varius scale of pictures. – Danijel Jun 14 '18 at 10:07
  • Check my edit. I add the max-width method. It should work with different scales. – Sylwester Pilarz Jun 14 '18 at 10:09
  • 1
    Not actually what needed but give me a bit of idea. Thnx. – Danijel Jun 14 '18 at 10:35

First of all, if your website is written in HTML5 (you can check that by the top of index.html file, it should contains <!DOCTYPE html> tag), copy this into the <head></head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

It sets the width of the page to follow the screen-width of the device. No matter what's the image size, it would scale your pictures to the resolution of the device.

Second, you should use the Bootstrap framework for your HTML. Bootstrap have something like img-responsive method, which is also very helpful. And, of course, you can set images into the container which is divided by 12.

Here you can read more about images in Bootstrap: Bootstrap Image Documentation

In flexbox, I recommend to use img {max-width:100%;} in the CSS file. You could do the same with height if necessary.

  • The doc type doesn't mean it's HTML 5, it just means it's HTML – Zach Saucier Jun 14 '18 at 18:01
  • 1
    The same image scaling can be done in one line of CSS like the end of your answer says, so I'm very unsure of why you recommend all of Bootstrap when it's unnecessary to the question – Zach Saucier Jun 14 '18 at 18:02
  • In HTML4 you have three different !DOCTYPE declaration, in HTML5 there should be ONLY <!DOCTYPE html>, that's for the standard. Yes, I know it's unnecessary, but to work with image is highly recommended to use framework, especially where there is a lot of images and you have to sort them one by one. Bootstrap in many ways helps work with them with the img-responsive class, so that's the one way to scale them correctly on a website. – Sylwester Pilarz Jun 14 '18 at 18:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.