Image oversize in HTML

Question

how can I solve this image oversize problem in my simple HTML photogallery with finding images in directory by PHP? I can't solve it and it's not visually good. Can you please help me? Screenshot is

Thanks.

What do you mean by "image oversize"? Maybe you should state what is it that you want to achieve instead, e.g. "I want all images to be the same size (200x200)" And how do you want to treat aspect ratios? Always retain aspect ratio? Do you want to show only a crop of the photo if the ratio is off? Do you want to show black bars? white bars? — light, Jun 13 '15 at 14:05

score 0 · Answer 1 · edited Jun 13 '15 at 13:23

0

Set all of the pictures with the same class, then add an image height to that class and it will set the images to all the same height.

Here is an example that i just made - http://jsfiddle.net/3gd5ooLf/

Im not sure how you are getting the image in PHP so i can't tell you how to set the class without seeing some code.

here's the CSS example:

.height {
    height: 100px;
}

edited Jun 13 '15 at 13:23

nomistic

2,902
4
20
36

answered Jun 13 '15 at 13:19

Matt Hammond

372
2
11

score 0 · Answer 2 · edited May 23 '17 at 10:30

0

This may be a good example to you . Refer to stackoverflow old question too. here is the link:link

    .img {
    position: relative;
    float: left;
    width:  100px;
    height: 100px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}

<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>

edited May 23 '17 at 10:30

Community

1
1

answered Jun 13 '15 at 15:02

shrestha rohit

2,920
2
13
20

score 0 · Answer 3 · answered Jun 14 '15 at 10:58

In your css file, you could add heigth and width property to adjust the images size.

For example:

img {

  heigth:200px;
  width: auto;

}

will set the heigth to 200px, but will keep the aspect ratio. To have square images, set the width to, for example, 200px

If you prefer, you could set the image to be scrollable when it's too long like so:

img {

  height:200px;
  width:200px;
  overflow: scroll;

}

Image oversize in HTML

3 Answers3