Alignment of images inside the box

Question

Alignment of images inside the box

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

I have a 'box' where images are loaded, all the boxes have the same size, this size is:

width:700px; 
height:575px

But not all images have the same size, that is, their sizes vary and can reach the maximum measures of the box to which it is loaded.

Example:

<div style="width:700px; height:575px">
  <img src="IMAGEM A SER CARREGADA" style="max-width:700px; max-height:575px">
</div>

Knowing then that the size of the image will always be variable, how can I leave these images centered vertically and horizontally inside the box where it was loaded?

html css

asked by anonymous 24.05.2014 / 07:21

2 answers

0

Take a look at this Smashing Magazine article: link

Here is an example online: link

26.05.2014 / 15:16

Join two Select How to get RadioButtonFor value through FormCollection and save in BD SQL Server

score 2 · Accepted Answer

One possibility is to use background to do this:

<!DOCTYPE html>
<html>
<head>
<style>
.imagem {
    width: 700px;
    height: 575px;
    border: 1px solid red;
    background: #fff url('imagem.png') no-repeat center;
}
</style>
</head>

<body>
  <div class="imagem"></div>
</body>
</html>

Note: The border is only to show the border for testing. If it does not find the image will fill with white. If the image is larger than the size of the box, it will be cropped (you can resize if you prefer). If it is smaller it will be centered in the div.