はその後

Question

THIS QUESTION HAS BEEN MOVED HERE画像行為の残りの部分が応答します

、divの幅に画像をトリミングしてください私はその画像がその切り取られた状態を維持したまま応答してくれるようにしたい。この例では、ウィンドウが800 pxに達したときに画像が切り取られた状態を失っていることがわかります。レスポンスは高くなりますが、これは800 pxに達したときに切り取った状態で行う必要があります。

#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 1

画像をトリミングするために、coverにobject-fitを設定します。

#apple-box { 
 
    width: 80%; 
 
    margin: 0 auto; /* to center the div */ 
 
} 
 

 
#big-apple { 
 
    height: 482px; 
 
    width: 100%; 
 
    object-fit: cover; 
 
} 
 

 
@media screen and (max-width: 800px) { 
 
    #big-apple { 
 
    height: auto; 
 
    object-fit: fill; 
 
    } 
 
}

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