fit container image to trim it

Question

fit container image to trim it

Navigation

#1 by (2 votes)

1

How can I make the image occupy the entire container? My idea is to be as shown in the photo. Being the red frame the image and the black frame rounded the container of images

#article{
    background-color: rgb(126,230,222, 0);
    padding: 0;
    height: 70%;
    width: 55%;
    margin: 0 auto;
    border-radius: 20px 20px 20px 20px;
    box-shadow: rgba(0,0,0,0.8) 0 0 10px;
}

 <div id="article">
            <div id="slider">
                <figure>
                    <img id="imgSlider" src="https://static.pexels.com/photos/207962/pexels-photo-207962.jpeg"/>
                </figure>
            </div>
        </div>

html css div

asked by Eduardo 09.11.2017 в 18:22

source

1 answer

Error opening old ASP.NET Function that transforms value of an input

score 2 · Accepted Answer

You must put a width: 100%; to the image AND remove the margin from figure . The only problem is that the image thus invades the rounded edges, you can add a padding to figure :

#article{
    background-color: rgb(126,230,222, 0);
    padding: 0;
    height: 70%;
    width: 50%;
    margin: 0 auto;
    border-radius: 20px 20px 20px 20px;
    box-shadow: rgba(0,0,0,0.8) 0 0 10px;
}
figure{
    margin: 0px;
}
img{
    width: 100%;
    height: auto;
}

<div id="article">
    <div id="slider">
        <figure>
            <img id="imgSlider" src="https://static.pexels.com/photos/207962/pexels-photo-207962.jpeg"/>
        </figure>
    </div>
</div>

Second snippet: Here the image is cropped by the div.

#article{
    background-color: rgb(126,230,222, 0);
    padding: 0;
    height: 70%;
    width: 55%;
    margin: 0 auto;
    border-radius: 20px 20px 20px 20px;
    box-shadow: rgba(0,0,0,0.8) 0 0 10px;
    position: relative;
    overflow: hidden;

}
figure{
    margin: 0px;
    height: auto;
}
img{
    width: 100%;
    height: auto;
    display: inline;
    margin: 0 auto;
    padding: 0;
}

<div id="article">
    <div id="slider">
        <figure>
            <img id="imgSlider" src="https://static.pexels.com/photos/207962/pexels-photo-207962.jpeg"/>
        </figure>
    </div>
</div>