嘗試將1658年的圖像按1156壓縮為div寬度：800px； 高度：100％; 作為背景圖片

Question

我試圖將1658年乘1156年的圖像用作背景圖片，以div的寬度為800px，高度為100％。 我的目標是使用CSS將圖像壓縮到寬度的大小，但圖像仍與div的大小重疊。 這是我的嘗試：

<div  style="margin: 0px; padding: 0px; width : 800px; height:100%" class="col-md-8 col-xs-8 col-lg-8">  

                    <div class="panel panel-body" style="background-repeat: no-repeat; background-attachment: fixed; background-position: center; overflow-scroll: none; width : 800px; height:100%;z-index: 1;  padding:2px; border: black solid thin;background: url(resources/img/bck.JPG) center top">

請如何將圖像壓縮到div的大小

Answer 1

嘗試background-size: cover

<div class="panel panel-body" style="background-image: url('http://www.soar-nj.com/media/k2/galleries/1176/fhpeqpl5.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; width : 800px; height:100%; z-index: 1;  padding:2px; border: black solid thin; background-size: cover; ">

不裁剪圖像的解決方案（使用background-size: 100% 100%; ）。

它可以將圖像擴展到100％的寬度和100％的高度，但是會拉伸圖像，因為圖像比容器大。 因此，我建議您使用background-size: cover或使用分辨率較低的圖像。

<div class="panel panel-body" style="background-image: url('http://www.soar-nj.com/media/k2/galleries/1176/fhpeqpl5.jpg'); background-repeat: no-repeat; width : 800px; height:100%; z-index: 1;  padding:2px; border: black solid thin; background-size: 100% 100%; ">

DEMO

這樣會將背景圖像縮放到盡可能大的程度，以使背景區域完全被背景圖像覆蓋。

Answer 2

您可以簡單地將DIV的高度設置為557px，然后使用background-size:cover

要么

您可以使用background-size: 100% 100%並將overflow:hidden到您的DIV中。