how to leave rectangular image?

Asked

Viewed 1,089 times

0

I would like to know how to leave a news image for example in rectangular format, without losing proportion. I looked on the Internet and found nothing that could help me.

inserir a descrição da imagem aqui

Note that the image is rectangular.

html css image

  • What is this, a clipping? I would have an example?

  • I edited the question and put an example image.

  • So, basically, you have an image in a specific way and you want to present it in a rectangular way on the page? That’s it?

  • Exacto Samir Braga!

  • What will you trim the image, this is acceptable to you?

  • In this format is already ideal practically. On average the original image has 600x400px

Show 1 more comment

2 answers

2

I believe there are many ways to do this for example the background-size with background-position, as already quoted.

However background-size is not supported for some older browsers (if there is need to control the size), if you need to run on some older mobiles recommend using overflow: hidden;, see an example:

.post .photo {
    overflow: hidden;
    width: 400px;

    /*Aqui deve ficar a altura da imagem desejada*/
    height: 150px;
}
.post .photo img {
    /*Aqui você deve ajustar pra centralizar a imagem verticalmente*/
    margin-top: -75px;
}
<div class="post">
    <div class="photo">
        <img src="http://i.stack.imgur.com/kCKkG.png">
    </div>
</div>

See the original image:

logo

1

Well Alexsander, this can be done in a very simple way, through the property background of css. For example:

<div class="noticia"></div>
<style>
.noticia{
  width: 300px;
  height: 200px;
  background: url('http://goo.gl/n7nehC') no-repeat;

}
</style>

Results in: http://jsfiddle.net/SamirChaves/qe7BJ/2/

Using your image as the background of div. Through the background-position and of background-size, you can change the position and size of the image.

There is more information in these documents (in English):

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

  • Could it be used without the background? because the image is in a database

  • 1

    @Alexsanderduques can use the property style="background-image: url(<?php echo $row['image']?>)"

  • 1

    The image being in the database is not an obstacle.

  • I thank you all for your attention, I will test here and give back. Thank you.

Browser other questions tagged html css image

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