bonsoir à tous,

J'aimerais que mon box model soit de la même dimension que le contenu * box content * à l'intérieur. Actuellement j'ai une image mais la box dépasse le contenu, comment faire que la box revienne à la même dimension que le contenu ? 

Ici mon Html :

<div class="inlineBlock containerServiettes">
          
            
                        <span >
                            
                            
                            <img id="bagLinkPic" src="bagLeather.jpg">
                        
                        
                        
                        </span>
               
                        
                    
                        <span id="serviettesText" itemscop itemprop="category">
                            
                            Serviettes
                            
                        </span>
                    
          
            
                </div>

Ici mon Css : 

.inlineBlock {
   
   display : inline-block ;
  margin : 0 ;
  padding : 0 ; 
   
}

.containerServiettes {
    
    position:relative;
    
    width : 65% ;
    left : 10%;
    top : 35%; 
    
}


#bagLinkPic {
    
  
    display : inline-block;
    width : 45%;
    left : 10%;
    border-radius : 10%;
    margin : 0;
    padding : 0;
}

#serviettesText {
    
        
    
     background-color : rgba(6,6,6,0.85) ;
     padding : 2%;
    position : absolute ;
     left: 15%;
    top : 55% ;
     font-family: hirondelleDemo;
     font-size : 160% ;
     border-radius : 10%;
    z-index: 100; 

}

le résultat :

j'aimerais que la box content fasse juste la taille de l'image et là ça déborde,

si quelqu'un a des suggestions (y),

merci de m'avoir lu =),

Armand

Bonjour,

Une proposition avec image en background :

https://codepen.io/Zonecss/pen/RMoPGy

-
Edité par AliasDmc 18 mars 2018 à 15:43:34