Images in divs

Question

Images in divs

Navigation

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

3

I have a question about divs with imagens inside, in this case, the question is:

If I have a div , with 400x400 , how do I make an image with 200x400 (or other resolution) occupy the total size of div , without distorting imagem , and without use background of css

For example:

* the first imagem is how the final result would be, as stated, the second is how it normally looks, the imagem is placed in div , always with whitespace, vertical , as horizontal , and the image should be adjusted according to the size of div .

html css imagem layout-responsivo responsivo

asked by anonymous 10.01.2017 / 15:04

2 answers

1

You can use overflow: hidden in the element that surrounds the image so that the image stays within the set limits. And in the image you can subtract the 50% (half of 100%) margins, up and down.

.imagem-1 {
  width: 400px;
  height: 400px;
  overflow: hidden;
}
.imagem-1 img {
  width: 100%;
  margin-top: -50%;
  margin-bottom: -50%;
}

<div class="imagem-1">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=200x400&w=200&h=400">
</div>

10.01.2017 / 15:16

AuthorizeAttribute in Controlller and Actions How to get filenames inside folders on WEB server API

score 2 · Accepted Answer

The image I'm going to use for testing has 500x375 resolution so I would do it like this:

img {
  width: 400px;
  height: 400px;
  object-fit: cover;
}

<img src="http://dicasdeboleiro.com.br/wp-content/uploads/2013/06/Dicas-de-dribles-de-futebol-2.jpg">

Noticetheobject-fit:coverpropertythatgivesthiseffecttotheimageasifitwereabackground-size:coverviewmoreat:
link

Obs. Without the property object-fit: cover the image is distorted.