Keep image with normal size - CSS

1

Good morning, I'm showing images in a slider, just that they are being stretched, like I do in css, so that it stays in the size specified in css, for example: width: 200px; and height: 200px. in this, the image can be cut, it does not have to show whole, but keeping it normal, not stretching it: link see photo collection ... help me

HOW TO RESOLVE:

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;
    
asked by anonymous 08.07.2014 / 16:39

2 answers

0

It can be done this way too:

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

Instead of the tag <img>

    
08.07.2014 / 16:59
1

Use the background-image queue property to display your image, and the contain and cover values for the background-size queue property 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 .

    
08.07.2014 / 16:45