webentwicklung-frage-antwort-db.com.de

Ein div so groß wie ein Bild darin machen

Ich habe ein div mit dem folgenden Code

HTML:

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

CSS

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

Das Problem ist, dass die Benutzer die Bildgröße, die Farbe und einige andere Dinge bearbeiten können. Ich möchte, dass das Div größer wird, je größer das Bild wird. Ich möchte, dass Breite und Höhe des div 250px betragen, wenn das Bild kleiner als das Bild ist, aber um größer zu werden, je größer das Bild wird. 

Die Lösung kann in PHP, JavaScript, CSS oder jQuery sein.

10
LightningBoltϟ

Versuche dies:

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

Fiddle

Danke an @ahren und @Mohsen

13
karaxuna

Dies wird die Arbeit erledigen:

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;
}

Verwenden Sie also entweder float für Ihr div oder verwenden Sie display: Inline-Block manuell.

Hier ist ein Beispiel: http://jsfiddle.net/mxykW/

2
Hrvoje Golcic

Funktioniert das Floating des Div mit Ihrem Layout? Dadurch wird seine Breite auf das enthaltene Bild angewendet.

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

Wenn Sie es löschen müssen, fügen Sie mit overflow: hidden ein Umbruchelement hinzu.

2
Josh Harrison

pHP ist in dieser Hinsicht sehr nützlich, da es die Funktion ' getimagesize ' hat:

<?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

verwenden Sie diesen Code:

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