與背景圖像和邊框圖像

-1

響應DIV你好，我有一個div與background image和border-bottom image。我想讓它響應。我不得不放棄固定height到div所以當我使其更加形象得到響應，但邊框和圖像增長之間的距離。這是我的代碼。與背景圖像和邊框圖像

.top-info { 
 
    background: url("http://i.stack.imgur.com/prA95.jpg") no-repeat top center; 
 
    height: 40rem; 
 
    background-size: contain; 
 
    border-bottom: 10px solid transparent; 
 
    border-image: url("bg-about-us_border.png") 30 stretch; 
 
    -webkit-border-image: url("http://i.stack.imgur.com/SUUpP.png") 30 stretch; 
 
}

<div class="top-info"></div>

我的問題是，它是在全寬工作良好。但在不同的移動分辨率下，邊界與圖像之間的距離會增加。

來源

2015-11-26 David Coder

提供更多的信息。你的問題是沒有充分描述 – Andrew

我已經編輯我的闕。 –

我已經解決了我的媒體查詢的問題... :)感謝所有 –

替換類

.top-info { 
    background: url("http://i.stack.imgur.com/prA95.jpg") no-repeat left 15px; 
    height: 40rem; 
    background-size: contain; 
    border-top: 10px solid transparent; 
    border-image: url("http://i.stack.imgur.com/SUUpP.png") 30 stretch; 
    -webkit-border-image: url("http://i.stack.imgur.com/SUUpP.png") 30 stretch; 

}

https://jsfiddle.net/8m9dop2c/1/

來源

2015-11-26 12:12:34

感謝先生。但我不想要邊界頂部。並且邊界底部應該在圖像之後。在不同尺寸的瀏覽器中，邊框圖像和圖像之間不應保留任何1 px距離。 –

任何想法先生..？ –

https://jsfiddle.net/8m9dop2c/2/ –

解決方法1：使用圖像

一個背景不改變包含它的div的大小。你是固定的容器的高度，也不管背景的尺寸的這個高度是固定的。爲什麼不使用簡單的圖像呢？

這是你的CSS：

.top-info { 
border-bottom: 10px solid transparent; 
border-image: url("bg-about-us_border.png") 30 stretch; 
-webkit-border-image: url("http://i.stack.imgur.com/SUUpP.png") 30 stretch; 
}

，並將HTML：

<div class="top-info"> 
<img src="http://i.stack.imgur.com/prA95.jpg" height=100% width=100%> 
</div>

解決方案2：使用填充-top屬性

現在，如果你不希望使用的圖像時，可以使用在第二回答這個問題中描述的技術，並設置一個填充頂。

How to get div height to auto-adjust to background size?

這將作爲背景創建空間，並且應被設置爲最佳效果的高度/寬度的圖像的比例。

然後你的CSS是：

.top-info { 
background: url("http://i.stack.imgur.com/prA95.jpg") no-repeat top center; 
width: 100% 
height: 0; 
padding-top: 60%; /* This should be equal to (img-height/img-width * container-width) */ 
background-size: contain; 
border-bottom: 10px solid transparent; 
border-image: url("bg-about-us_border.png") 30 stretch; 
-webkit-border-image: url("http://i.stack.imgur.com/SUUpP.png") 30 stretch; 
}

，並將HTML：

<div class="top-info"></div>

來源

2015-11-26 12:49:38

圖像是動態的所有網頁，現在我不能改變，所以圖像必須作爲背景圖像。 :( –

與背景圖像和邊框圖像

回答

相關問題