Geek Answers Handbook

How to make thumbnails the same size

It’s hard for me now to try to create thumbnails of the same size. I have a simple gallery gallery that simply extracts all the images from the database and puts them on a page with a maximum width of 150 pixels and a maximum height of 150 pixels.

Now it looks strange, because all the images have a different shape, is there a way to make them the same size without breaking the image separately? The easiest way, please. I do not want to be able to select thumbnail sizes at the boot stage.

+4
source share
4 answers

img : . : , . , . , , .

div background-image, background-size cover. , , . , div a background-color background-size contain, , " ".

( inline-block, <img>):

<style>
.thumbnail {
    background-color: black;
    width: 250px;
    height: 200px;
    display: inline-block; /* makes it fit in like an <img> */
    background-size: cover; /* or contain */
    background-position: center center;
    background-repeat: no-repeat;
}
</style>
<div class=thumbnail style="background-image: url(image1.jpg);"></div>
<div class=thumbnail style="background-image: url(image2.jpg);"></div>

jsfiddle demo cover: http://jsfiddle.net/tbeog5o9/24/

jsfiddle contain: http://jsfiddle.net/tbeog5o9/25/

+15

? - , .

, , , .

, . :

  • , .

  • .

, . , . , , , , , .

+1


.thumbnail video, img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

, .

0

jsfiddle: http://jsfiddle.net/larryjoelane/tbeog5o9/38/

<img class="resize" src="http://cdn.moneycrashers.com/wp-content/uploads/2012/03/apple-imac-27.jpg"/>

<img class = "resize" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR-pya5LcLCg82HTG3R36aS9B59SSjNzewp8tAHFZrjFjRb1rXI"/>

CSS

    img.resize{

    max-width:150px;/*rendered height will be 103px and width will be 150px*/

}

URL- img , URL- , img.

103px, .

-2

More articles:


All Articles