CODEWITHSUNDEEP
htmlcss
user7992920
user7992920

Reputation: 87

HTML/CSS Cropping Image from left AND right when screen becomes too small

first of all... I am totally new so i apologize if i forgot some important stuff that helps you to answer my Question. I´ll give my best.

This is my Code:

HTML:

<div class="slider">
    <figure>
        <div>
            <img src="a.jpg">
        </div>
        <div>
            <img src="b.jpg">
        </div>
        <div>
            <img src="c.jpg">
        </div>
    </figure>
</div>

And the CSS:

@media screen and (max-width: 550px) {

.slider figure div{
    width: 20%;
    float: left;
}

.slider figure img{
    min-height: 100%;
    min-width: 100%;
    max-height: 100%;
    max-width: 100%;    
}


.slider figure {
    position: relative;
    width: 500%;
    margin: 0;
    left: 0;
    animation-name: slidy;
    animation-iteration-count: infinite;
    animation-duration: 15s;
}


@keyframes slidy{

    0%{
        left: 0%;
    }

    31%{
        left: 0%;
    }
    35%{
        left: -100%;
    }
    66%{
        left: -100%;
    }
    70%{
        left: -200%;
    }
    95%{
        left: -200%;
    }
    100%{
        left: 0;
    }
}
}

The CSS Slider Code works just the way i want for "normal" Screen sizes like the iPad-Pro and PC-Screen. Obviously when the Screen gets too small (a Phone for example) the Images are going to look ugly because i resize them with the Browser Window.

So when the Screen gets too small i want to cut the Image on the left AND right side (NOT resizing with the Browser Window) so one is able to see the center of the Image and not a warped picture.

I tried solving my Problem with transform but i couldn't get it done because everything i tried ruined the slider. Do you guys have any other idea?

Upvotes: 1

Views: 2224

Answers (3)

user7992920
user7992920

Reputation: 87

UPDATE:

If anybody has the same Problem i had... here´s my solution. I used background pictures. So i was able to use 

@media

for different screen sizes (i just used the same picture with different sizes) and 

background-position:center;

so the image gets cropped from the left and right side. Thanks again for all your help!

Upvotes: 1

StefanBob
StefanBob

Reputation: 5128

In that media query you are setting the width of the image to be 100%; So it will be resized with browser window. You can remove that and also center the image by adding text-align: center; to the parent. However once the browser window becomes smaller than the img there will be an overflow scroll. 

.slider figure div{
    width: 20%;
    float: left;
    text-align: center;
}

.slider figure img{

}

If you want this overflow image to be centered at all times, that would involve some javascript.

Upvotes: 0

Subi
Subi

Reputation: 107

.slider figure img{

 min-width: 50px !important;

}

.slider figure {

text-align:center  !important; 
over-flow:hidden  !important;    

}

Upvotes: 0

Related Questions