image avec bordure conteneur de largeur fixe à l'intérieur

Question

je un conteneur à largeur fixe (div) et une image à l'intérieur, cette image doit correspondre à la largeur du conteneur, mais ayant une marge, comme ceci:

J'ai essayé ajouter un remplissage au conteneur, cela rend le conteneur plus grand.

Ma seconde tentative consistait à ajouter une marge à l'image, mais elle la faisait sortir du conteneur.

Les deux tentatives sont dans cet extrait:

$('.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>

Answer 1

J'espère avoir compris votre problème. Vous devez d'abord supprimer la marge que vous avez ajoutée à l'image. que de donner un rembourrage à votre conteneur div et ajoutez également box-sizing: boîte frontière 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>

Laissez-moi savoir si cela fonctionne

Answer 2

Vous devez attribuer box-sizing: border-box; à votre conteneur puis utilisez votre solution de rembourrage. Ce CSS arrête le remplissage de l'ajout à la taille d'un élément.