Maintain full size image - CSS

Asked

Viewed 311 times

1

good morning, I’m showing images in a slider, only they’re being stretched, like q do in css, so that it stays in the size specified in css, for example: width:200px; and height:200px. on that, the image can be cut, not need to show whole, but keeping it normal, not stretching it: http://planow.com.br/eco/colecao-masculino-2.php?colecao=receituario_m see collection of photos... help me

HOW TO SOLVE:

background-image: url('admin/cache/1404829174269_808646729155217_5122918805829398554_n.jpg');
width: 49%;
height: 49%;
background-repeat: no-repeat;
background-position: center center;
margin: 0 5px 5px 0;
background-size: cover;
php jquery css

  • Can you post your create code from div with the photo? both css and html... So we can help you better @Furlan

2 answers

1

Use the property background-image to display your image, and the values contain and cover to the property background-size to set how the image will be displayed. Example:

<html>
<style>
    .panel {
        width: 200px;
        height: 200px;
        background-image: url('http://www.allamericanbaseballacademy.com/users/SamuelWernick6047/docs/Image//Bucknell%20University%20Baseball.gif');
        border: 2px solid red;
        background-repeat: no-repeat;
        background-position: center center;
        margin: 10px;
    }

        .panel.contain {
            background-size: contain;
        }

        .panel.cover {
            background-size: cover;
        }
</style>
<body>
    <div class="panel contain"></div>
    <div class="panel cover"></div>
</body>
</html>

Example in Jsfiddle.

  • Man, thanks, you saved the day !

  • Not for that, I’m glad it worked. Background generally offers greater functionality for displaying images than the element img.

  • but it’s not background, it’s picture, I’m trying here

  • 1

    Dear @Furlan, in case I helped you with the answer, please rate it as the correct answer, for even as a thank you!

0


It can be done that way too:

<div style="
background-image: url(admin/cache/1404830097269_808646729155217_5122918805829398554_n.jpg);
width: 264px;
height: 177px;
background-size: 262px 177px;"></div>

In place of the tag <img>

Browser other questions tagged php jquery css

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