All geek questions in one place

Image of center in fixed-size container element (CSS, HTML)

I want to display images on a .net page that I download from a database (amount may vary). All images have different widths and heights of up to 130 pixels and 60 pixels, respectively. I want to put images in container elements with a fixed width of 130 pixels and a fixed height of 60 pixels. Images should be centered vertically and horizontally. Container elements should be aligned horizontally, if possible.

I tried div (floating point) and span . With the div, I get fixed sizes, but cannot center the images. With a range, I can center, but not set any size. If I put a span in a div, it will behave like a div (centering is ignored).

+4
source share
7 answers

You can see how it works at http://jsfiddle.net/km5dk/8/

But I think you are looking for something like this.

### HTML ### <div id="container"> <div class="image-container"> <img src="#" alt="A image" /> </div> </div>​ ### CSS ### #container { width: 130px; height: 60px; display: table; background-color: #ccc; } #container .image-container { text-align: center; vertical-align: middle; display: table-cell; } #container .image-container img { max-width: 160px; max-height: 60px; }
+9
source

Thinking a bit outside the field (sorry for the intentional punishment!), You can use background-size in the CSS rule of your container and background-image: url(this_image.jpg); as an inline style for individual containers. This will handle all the scaling for you in a smaller and more accurate package.

Setting background-size: cover; will scale the image so that the smallest size matches (although there may be some cropping), and background-size: contain; will provide installation of the entire image.

This is another option ...

Danny

+2
source

Use positioning. The following worked for me:

 div{ display:block; overflow:hidden; width: 70px; height: 70px; position: relative; } div img{ min-width: 70px; min-height: 70px; max-width: 250%; max-height: 250%; top: -50%; left: -50%; bottom: -50%; right: -50%; position: absolute; }
+1
source

create image center

 .image-container { width: 500px; height: 500px; position: relative; } .image-container img { position: absolute; right: 0; left: 0; top: 0; bottom: 0; margin: auto auto; }

auto resize image to fit container div

 .image-container img { max-height: 100%; max-width: 100%; }
+1
source

if you have an IMG tag inside a div, use margin: 0px auto on the css div;

For vertical:

display: table-cell; vertical-align: medium

0
source

I'm still learning myself, I just started doing HTML / CSS about two weeks ago, but it seems to work just fine with hover, click, description field, title and center image.

You can put CSS code in a separate stylesheet. I thought I would keep them together for publication.

 <!DOCTYPE html> <html> <head> <style> body { background-color:black; color:white; } #container { width:18em; height:18em; } #title-image { background-image:url('http://www.gravatar.com/avatar/cd1954c9caf7ffc02ab18137967c4bc9?s=32&d=identicon&r=PG'); background-repeat:no-repeat; background-position:center; border:1px solid RGBa(255, 255, 255, 0.1); background-color:RGBa(127, 127, 127, 0.1); color:#CFCFCF; width:10em; height:10em; margin-left: 3.9375em; margin-right: 4em; text-align:center; display: block; } #title-image:hover { border:1px solid RGBa(255, 255, 255, 0.15); background-color:RGBa(127, 127, 127, 0.15); color:#FFFFFF; } #description { width: 18em; border:1px solid RGBa(255, 255, 255, 0.03); background-color:RGBa(127, 127, 127, 0.03); text-align:center; display: block; } </style> </head> <body> <div id="container"> <a href="google.com" id="title-image">This is your Title?</a> <p id="description">Your description<br>Can go here.</p> </div> </body> </html>
0
source

With Bootstrap 3, you can add a centralized img block class to center the image.

 <img class="img-responsive center-block" src="my_image.png" />
0
source

Source: https://habr.com/ru/post/1403957/

More articles:


All Articles