Bild überschreitung div max-height und max-width Regeln

Erstellte ich ein Bild raster-und aus irgendeinem Grund die Bilder nicht mehr reagiert, um die maximale Breite und maximale Höhe Regeln.

Ich habe die Klasse 

.sizedimg {
    max-width:100%;
    max-height:100%;
}

Größe der Bilder, so dass Sie in Ihrem natürlichen Zustand, aber ich will Sie fix in der max-height 350px; und min-height 350px;

Dies ist mein html-Code für Sie. Ich versuche, schließen Sie den Bild-in 'productpiccontainer", so dass der pic nicht übersteigen, dass ein div, aber es ist unter den gesamten Bereich der Klasse 'Punkt'

<div class="item">
    <div class="productpiccontainer">
    <?php echo "<img class='sizedimg' src='productpics/".$product['img'] ."' alt='Product Pic'>"; ?>
    </div>      

    <p><?php echo "<a href='./viewProduct.php?view_product=$id'>" . $product['product_name'] . "</a>"; ?></p>
    <p> <?php echo "$" . $product['price']; ?> </p>                                     
</div>

Erstellte ich ein Turnschuh....https://jsfiddle.net/39qy0zdh/

Aber für einige Grund es nicht wirklich zeigen, was passiert ist. Also, wenn jemand möchte, um zu sehen, ein live-Beispiel dafür, meine Website ist buyfarbest.com . Dort, wenn Sie klicken Sie auf die Registerkarte Produkte, Sie werden sehen, genau das, was ich meine. Wenn man sich die leeren Produkt auf der rechten Seite, das ist wie ich bin versucht, dieses format, mit dem Bild in die innere Grenze.

Jemand eine Idee, warum dies nicht für mich arbeiten?

  • Sie müssen fügen Sie die Klasse sizedimg zum Bild: <img class="sizedimg" src="http://imageshack.us/a/img850/1646/pu9p.jpg" /> - jsfiddle.net/39qy0zdh/1
  • Ich habe die Klasse von 'sizedimg' in ihm aber? Wenn man sich anschaut, meine Frage ist, wie habe ich eigentlich den code auf der Seite. Ich habe gerade in einem random pic für die Geige
  • Ihre jsfiddle, dass fehlt die Klasse
  • Keine Ahnung warum das nicht funktionieren auf meinem eigentlichen code aber? Wenn ich habe, dass die Klasse, in der es, warum dann würden Sie es sein, die die gesamte Eltern-div?
  • Versuchen Sie overflow: hidden; zu .productpiccontainer - dies wird verhindern, dass das Bild vom schleichenden in den Textbereich unten. Ihr Beispiel nicht zeigen, das problem so gut wie Los auf die Seite
  • Diese Art funktioniert, aber es dauert einige wichtige Teile auf der Unterseite des pic. Gibt es trotzdem kann ich erhöhen die pic einige, so zeigt es richtig....aber ich werden das hinzufügen von anderen pics, die nicht so Aussehen wie diese, so will ich nicht zu gut.
  • Sie müssen die position der pic weiter oben. ich will hinzufügen, eine Antwort weiter unten. versuchen Sie dieses und sehen, ob Sie es mögen: .item{box-shadow: #999 0px 0px 6px;}

InformationsquelleAutor Becky | 2015-06-19
  1. 1

    Beheben Sie das Produkt-image, das Sie benötigen, um:

    Dies wird Stop-das Bild fließt auf den text unten:

    .productpiccontainer {
  width: 100%;
  height: 100%;
  border: 1px solid #D9D9D9;
  min-height: 350px;
  max-height: 350px;
  overflow: hidden;
}

    Diesem fix wird die position problem, damit man mehr von dem Produkt:

    .sizedimg {
  max-width: 100%;
  position: relative;
  margin-top: -70px;
}

    Wenn Euch gefällt mein kleines drop-Schatten-Effekt auf die Produkte:

    .item {
  width: 32%;
  text-align: center;
  border: 1px solid #D9D9D9;
  padding: 0px;
  list-style: none;
  float: left;
  margin-right: 10px;
  margin-bottom: 15px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  min-height: 420px;
  box-shadow: #999 0px 0px 6px;
}
    • Dies scheint wie overkill. Warum nicht einfach löschen min-und max-auf .productpiccontainer und seine height zu 350px?
    • Denn dann würde es nicht passen, die Breite ist richtig. Dies ist die Seite der person ist zu versuchen, zu beheben: buyfarbest.com/products.php?shopnow=Shop+Jetzt
    • Ich bevorzuge auch große Bilder über cut-off-Bilder, aber ich denke, dies funktioniert, wenn die Bilder nicht zu groß sind.
    • Ich Schätze Ihre Hilfe. Ich denke, Ihre Lösung wäre die beste, wenn es hätte große meiner Bilder. Ich brauche Sie, um größer zu werden und nicht haben Sie kleine. Ich sehr gut zurück kommen können, und verwenden Sie diesen code später bekomme ich unterschiedlich große Bilder. Sobald ich kann, geben die positiven up-votes, ich werde wieder kommen und so für Sie tun. Danke.
    InformationsquelleAutor Andrew
  2. 0

    Verpasst die sizedimg Klasse aus dein Bild.

    https://jsfiddle.net/39qy0zdh/2/

    Edit:

    Legen Sie die max-height auf .sizedimg zu 350px. max-height wird nicht funktionieren, wie beschrieben in https://stackoverflow.com/a/14263416/388566

    Besser noch, tun Sie dies https://jsfiddle.net/39qy0zdh/5/

    Müssen Sie "Feste Höhe" auf .productpiccontainer sowieso, um zu halten Sie Ihr Netz sauber.

    Hier einige verbesserte CSS. 

    .productpiccontainer {
    width: 100%;
    height: 350px;
    border: 1px solid #D9D9D9;
}
.sizedimg {
    max-width: 100%;
    max-height: 100%;
}
    • Ich habe die Klasse von 'sizedimg' in ihm aber? Wenn man sich anschaut, meine Frage ist, wie habe ich eigentlich den code auf der Seite. Ich habe gerade in einem random pic für die Geige.
    • Ah sorry, aber das jsfiddle war die gleiche wie die website. Sie wollen set max-height: 350px auf sizedimg. max-height: 100% wird nicht funktionieren.
    • Gibt es einen besseren Weg, dies zu tun, so dass es funktioniert gut mit Bildschirmen verschiedener Größe? Ich meine nicht media queries mit Handys oder tablets. Ich meine mit der unterschiedlichen Größe, desktop-Monitore. Das ist, warum ich habe versucht zu tun, zu 100%, so dass es bleiben würde, der universal gleiche Größe.
    • Sie können nicht Messen 100% von 100%, einen Basiswert zu setzen. Sollten Sie wirklich den .productpiccontainer Klasse height von 350px eher als die Verwendung von min und max. Dann sizedimg halten können max-height: 100%.
    • Dies macht das Bild nicht auf die ganze Breite aber.
    • Ich hätte gedacht, dass vorzuziehen, da die alternative wäre, schneiden Sie einen Teil des Bildes. Wenn Sie nichts dagegen haben, ein Teil des Bilds abgeschnitten wird @Andrew ' s Antwort ist der Weg zu gehen.
    • Ich Schätze Ihre Hilfe. Ich denke, Ihre Lösung wäre die beste, wenn es hätte große meiner Bilder. Ich brauche Sie, um größer zu werden und nicht haben Sie kleine. Ich sehr gut zurück kommen können, und verwenden Sie diesen code später bekomme ich unterschiedlich große Bilder. Sobald ich kann, geben die positiven up-votes, ich werde wieder kommen und so für Sie tun. Danke.

    InformationsquelleAutor PiranhaGeorge
Schreibe einen Kommentar