圖像與邊框內側固定寬度容器

我有一個固定的寬度容器（DIV）和圖像內，該圖像應該適合容器的寬度，但具有餘量，這樣的：圖像與邊框內側固定寬度容器

我試圖爲容器添加填充物，這會使容器變大。

我的第二次嘗試是爲圖像添加一個邊距，但是它會將其放到容器外。

兩個嘗試在這個片斷：

$('.result1').html('div is ' + $('.test1').width() + ' and image is ' + $('.test1 img').width()); 
 
$('.result2').html('div is ' + $('.test2').width() + ' and image is ' + $('.test2 img').width());

div{ 
 
    width: 300px; 
 
    background-color: #999; 
 
} 
 
img{ 
 
    background-color: #FFF; 
 
    width: 100%; 
 
} 
 
.test1{ 
 
    padding:10px; 
 
} 
 
.test2 img{ 
 
    margin:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='test1'> 
 
    <img src='http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png' /> 
 
</div> 
 
<div class='result1'></div> 
 
<div class='test2'> 
 
    <img src='http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png' /> 
 
</div> 
 
<div class='result2'></div>

來源

2017-06-13 stramin

我希望我能理解你的問題。您需要先刪除添加到圖像的邊距。不是給填充到您的div容器，並添加盒大小：邊界框IT-

$('.result1').html('div is ' + $('.test1').width() + ' and image is ' + $('.test1 img').width());

div{ 
 
    width: 300px; 
 
    background-color: #999; 
 
    box-sizing: border-box; 
 
    padding: 10px; 
 
} 
 
img{ 
 
    background-color: #FFF; 
 
    width: 100%; 
 
} 
 
.test1{ 
 
    padding:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='test1'> 
 
    <img src='http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png' /> 
 
</div> 
 
<div class='result1'></div> 
 
<div class='test2'> 
 
    <img src='http://www.iconsdb.com/icons/preview/orange/stackoverflow-4-xxl.png' /> 
 
</div> 
 
<div class='result2'></div>

讓我知道，如果它

來源

2017-06-13 22:14:53

是的，這就是我尋找，我總是避免使用填充，因爲他們使我的設計比我想要的更大，使用邊框更容易。 @WizardCoder答案也是正確的，但我標記這一個，因爲該片段使它更容易理解:) – stramin

很高興我能幫上忙。祝你好運 –

您需要分配box-sizing: border-box;您的容器，然後用你的填充液。這個CSS停止填充添加元素的大小。

來源

2017-06-13 21:53:34 WizardCoder

圖像與邊框內側固定寬度容器

回答

相關問題