Image alignment inside the box

Asked

Viewed 1,376 times

0

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

width:700px; 
height:575px

However, not all images have the same size, that is, their sizes vary being able to reach the maximum measurements 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 image size will always be variable, as I can leave these images centered vertically and horizontally inside the box where it was loaded?

html css

2 answers

2


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>

Obs: The border is just to show the edge to test. If you can’t find the image, you’ll fill it with white. If the image is larger than the size of the box, it will be cropped (you can resize also if you prefer). If it is smaller it will be centered on the div.

0

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.