1

I'm trying to create a layout that require the display of images. I've tried to deal with it just by using width: 100%; height: auto;, but the ratio of the image is always going to ruin the appearance of the page.

For example:

https://jsfiddle.net/iDaniel19/sLrntpcw/1/

I've been looking at paid templates/ websites to see how they deal with images and all of them use a fixed height, width depending what size looks good on page.

I'm using bootstrap classes like col-xs-3. Now let's assume a user uploads a picture 1230x415 or 415x1230. Now I have 2 approaches to display it on the page:

  1. Use width: 100%; height: auto;. This will mess with the appearance of the layout.

  2. Contain the image in the width decided by col-xs-3 and some predefined height. This will mess with the aspect ratio of the image.

  3. Crop the image ??

How does one actually deal with images uploaded by the user and keeping the page look good?

Bogdan Daniel
  • 2,689
  • 11
  • 43
  • 76
  • Use max-width on the container div, and max-width on the img tag.. – James Walker Mar 21 '17 at 11:56
  • try, `max-width: 100%` instead of `height`. And if you're looking for a automatic solution for managing images of different dimensions, then there isn't one. Even **Facebook** uses a algorithm to resize and crop user uploaded images. – Deepak Yadav Mar 21 '17 at 11:57
  • @DeepakYadav I already have the width set to that. The height is problem. – Bogdan Daniel Mar 21 '17 at 11:57
  • A common approach would be to resize (and maybe crop) the uploaded images to fit your layout (width, height or aspect ratio). This has the benefit or preventing users to put *huge* images on the page, heavily slowing down page load times. – domsson Mar 21 '17 at 11:58
  • @BogdanDaniel .. my bad.... Use max-height on the container div, and max-width on the img tag.. it will display only within that frame you set, and scale appropreiatly – James Walker Mar 21 '17 at 12:01
  • @domdom yeah, that s what I thought about doing but wanted to see some opinions of more experienced people than me. But I was thinking that I still have some problems. I would always have to resize based on height, cause the width will change all the time, no ? – Bogdan Daniel Mar 21 '17 at 12:26
  • @JamesWalker that won't work. Try it in jsfiddle. That's one of the reasons I put it there. – Bogdan Daniel Mar 21 '17 at 12:29
  • If you have a set width, you could scale down (or even up) the image until the width matches. Then, if you want to also enforce a maximum height and the scaled image exceeds that, you cut off equal slices at the top and bottom. – domsson Mar 21 '17 at 13:24
  • My width is determined by the browser window. 'Responsive' and all... – Bogdan Daniel Mar 21 '17 at 13:26

2 Answers2

0

Try using a min and max height on the image.

.event-image > img {
    width:100%;
    min-height: 200px;
    max-height: 300px;
    overflow:hidden;
}
cnrhgn
  • 703
  • 4
  • 18
0

This should keep the height you want and proper aspect ratio.

CSS:
body{margin: 0;padding:0;}
#styled>div{
    position:relative;
    margin: 0 auto;
    max-width:400px;
    text-align:center;
    border:1px solid lime;
    }
#styled>div>img{
    max-height:200px;
    }
#not-styled>div{
    position:relative;
    margin: 0 auto;
    text-align:center;
    border:1px solid blue;
    }


    HTML:
<div id="styled">
        <div><img src="path/to/your/image.png" alt="" /><p>img size: 250x250</p></div>
        <div><img src="path/to/your/image2.png" alt="" /><p>img size: 850x500</p></div>
    </div>
    <div id="not-styled">
        <p>NOT styled</p>
        <div><img src="path/to/your/image.png" alt="" /><p>img size: 250x250</p></div>
        <div><img src="path/to/your/image2.png" alt="" /><p>img size: 850x500</p></div>
    </div>

You can see an example at webbdesign.ca/photo_aspect_example.html

James Walker
  • 390
  • 4
  • 19
  • This looks promising, but I think I ll go for resize and crop in some way. Displaying the whole image in this case will leave white space around it. I just realised that the only way a page might look good is if all the images have the same width/height. – Bogdan Daniel Mar 21 '17 at 13:29