Eddy Eddy - 1 month ago 7
CSS Question

Crop image down when scaling browser-window to given browser-window width. Then let remaining portion of image be responsive

I am using the code below to attempt the following:


  1. As the browser-window is scaled down, the image is cropped till the
    browser-window is scaled down to width 800px or less.

  2. At Browser-window width 800 px or less, the image should become
    responsive. Meaning: that part of the photo that's left remaining
    (after being cropped by scaling the browser-window) should scale
    along with the browser-window.



But it's not working. At the moment, while using the code below, the image does crop, and when browser-window width 800px or less is reached the image does become responsive, but only by loading back the complete and uncropped image to do so. I want the cropped portion of photo to become responsive.

Can anyone help please? Also a JSFIDDLE HERE.



#apple-box {
width: 80%;
overflow: hidden;
}

@media screen and (max-width: 800px) {
#big-apple {
width: 100vw;
}

<div id="apple-box">
<img id="big-apple" src="http://www.stedentripidee.nl/wp-content/uploads/2015/10/stedentrip-new-york.png">
</div>




Answer

is this what you want to achieve? JSfiddle

 #apple-box {
    width: 90%;
    overflow: hidden;
    background-image: url(http://www.stedentripidee.nl/wp-content/uploads/2015/10/stedentrip-new-york.png);
    background-size: cover;
    background-position: center;
    height: 400px;
}
@media only screen and (max-width: 800px) {
      #apple-box:after {
        content: '';
        display:block;
        padding: 28.5%;
      }
    #apple-box{
        height: auto;
      }
}