Wrap div intorno immagine

Ho un div intorno a un'immagine come questa:Wrap div intorno immagine

<div class="q"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" /> 
</div>

Il risultato è che il div è più grande l'immagine. Vorrei avvolgerla intorno all'immagine dandogli la stessa altezza e larghezza (senza impostare la dimensione)

img { 
    z-index: -1; 
    position: relative; 
    width:300px; 
} 

.q { 
    width:100%; 
    height:100%; 
box-shadow:inset 0px 0px 85px red; 
-webkit-box-shadow:inset 0px 0px 85px red; 
-moz-box-shadow:inset 0px 0px 85px red; 
}

ho provato altezza e la larghezza 'auto', ma anche non funziona.

JsFiddle

fonte

2013-03-25 Youss

Si potrebbe aggiungere questi:

img { 
    display: block; 
} 

.q { 
    float: left; 
}

e rimuovere:

.q { 
    width: 100% 
    height: 100%; 
}

jsfiddle

fonte

2013-03-25 09:28:40 Joonas

Grazie mille :) – Youss

impostare il margine e padding del div a zero:

div.q{ 
margin:0; 
padding:0; 
}

fonte

2013-03-25 09:24:25

Qui yo andare

<html> 
<head> 
<style type="text/css"> 
img { 
    z-index: -1; 
    position: relative; 
    width:300px; 
} 

.q { 
    width:300px;  
box-shadow:inset 0px 0px 85px red; 
-webkit-box-shadow:inset 0px 0px 85px red; 
-moz-box-shadow:inset 0px 0px 85px red; 
} 
</style> 
</head> 
<body> 
<div class="q"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" /> 
</div> 
<body> 
</html>

fonte

2013-03-25 09:31:13

Ho trovato questo metodo il più facile,

<div style="display:inline-block"> 

      <p style="float: left; padding-left: 20px"> 
       <img src="Images/user.png" style="height: 200px; width: 207px" /> 
      </p> 
      <h4 style="text-align: center">Client Zone</h4> 
      <p>So, he played with that child, the whole day long, and they were very merry.</p> 
    </div>

Questo esempio ha il testo in essa, ma, anche se si prende l'ultimo <p> tag <h4> e la

<div style="display:inline-block;" >

Il "display: inline-block;" assicura che l'intera immagine venga racchiusa all'interno del tag .

fonte

2015-10-02 04:38:13 user3736786

Wrap div intorno immagine

risposta

Problemi correlati