無拉伸整個圖像或重複

我怎樣才能把一個完整的背景圖像不拉伸或重複以高品質像素的圖像，我不想圖片看起來像是拉伸圖像無拉伸整個圖像或重複

HTML代碼

<div class="carousel-inner"> 
      <div class="item active"> 
       <!-- Set the first background image using inline CSS below. --> 
       <div class="fill fill" style="background-image:url('img/intro%205.jpg');"></div> 
       <div class="carousel-caption"> 
        <h1>P-DECO</h1> 
       <p>YOUR PARTNER TO THE TOP </p> 
       </div> 
      </div> 
     </div></div>

CSS代碼：

.fill { 
    width: 100%; 
    height:300px; 
    background-position:center ; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    background-size: contain; 
    -o-background-size:contain; 
    background-repeat: no-repeat; background-size: 100% 100%;background-origin: content-box; 
    z-index: 1030; 
    position: fixed; 
}

來源

2016-08-23 mohamad mohamad

你能澄清你的意思嗎？你的形象大小是多少？你面臨什麼問題？一般來說，如果您不對背景圖像進行任何大小調整（不要使用'background-size'），它將會像素完美（但當然它必須足夠大，並且您會看到不同的區域不同的電腦和屏幕。） –

1024 * 620的問題，如果我刪除大小的圖像將中間與白色的每一邊，如果我把大小的形象將被拉伸，它看起來不好我想圖像看起來完全寬度和高度，看起來不錯，看起來不錯在所有設備 –

啊，所以你想調整圖像的大小，但保留高寬比（寬高比）。 Huy的回答應該解決這個問題。當然，放大圖像時總會有些模糊。這就是它的方式 - 計算機無法顯示它沒有的乾淨像素。爲了看起來很完美，你需要一個更大的圖像 –

你試過

background-size: cover;

如果你想讓背景覆蓋整個元素，那麼我認爲這是解決方案。

我怎樣才能把一個完整的背景圖像沒有拉伸或重複高品質像素的圖像我不希望圖像看起來像拉伸圖像。

我認爲這是可能的，當你的圖像尺寸大於你的元素大小。

來源

2016-08-23 11:48:18

無拉伸整個圖像或重複

回答

相關問題