web-dev-qa-db-fra.com

Faire un div de la même taille qu'une image à l'intérieur

J'ai un div avec le code suivant

HTML:

<div id='imgContainer'>
    <img src='/img/logo.png' id='imglogo'></img>
</div>

CSS

div#imgContainer {
    width: 250px;
    height: 250px;
    padding: 13px;
}

Le problème, c’est que les utilisateurs peuvent modifier la taille de l’image, la couleur et quelques autres éléments. Je souhaite donc que la taille de la division s’agrandisse à mesure que l’image grandit. Je veux que la largeur et la hauteur de la div soient de 250 pixels si l'image est plus petite que celle-ci, mais de plus en plus grandes à mesure que l'image s'agrandit. 

La solution peut être en PHP, JavaScript, CSS ou jQuery.

javascriptphpjquerycss
10
LightningBoltϟ

Essaye ça:

div#imgContainer {
    min-width: 250px;
    min-height: 250px;
    padding: 13px;
    display: inline-block;
}

Fiddle

Merci à @ahren et @Mohsen

13
karaxuna

Cela fera le travail:

div{
    border:1px solid black;  /* you can remove this */
    box-sizing:border-box; /* you can remove this */
    padding:13px;
    min-width:250px;
    min-height:250px;
    display:inline-block;
}

Vous pouvez donc utiliser float sur votre div ou simplement utiliser display: inline-block manuellement.

Voici un exemple: http://jsfiddle.net/mxykW/

2
Hrvoje Golcic

Flotter le div fonctionne-t-il avec votre mise en page? Cela entraînera sa largeur à l'image contenue.

div#imgContainer {
    min-width: 250px;
    min-height: 250px;
    padding: 13px;
    float: left;
}

Si vous devez le supprimer, ajoutez un élément d'habillage avec overflow: hidden.

2
Josh Harrison

php est très utile dans ce domaine car il a la fonction ' getimagesize ':

<?php
$size = getimagesize($filename);
$fp = fopen($filename, "rb");
if ($size && $fp) {
    header("Content-type: {$size['mime']}");
    fpassthru($fp);
    exit;
} else {
    // error
}
?>
0
Daniël Tulp
div#imgContainer {
    min-height: 250px;
    min-width: 250px;
    width: Auto;
    height: Auto;
    padding: 13px;
}
0
Indranil.Bharambe

utilisez ce code:

div#imgContainer {
    min-width: 250px;
    min-height: 250px;
    padding: 13px;
    display: inline-block; 
}
0
Mohsen Safari