Bild vergrößern Höhe css

Ich versuche zwei Bilder zu füllen eine Zelle. Sind beide gesetzt, um breiten von 100% und die horizontale Strecke ist perfekt. Beide sind gesetzt in Höhen von 50%, einer ist perfekt, der andere überschneidungen der Zelle und der Freisetzung in die Zelle unten, weil es nicht zu Strecken, um die Höhe habe ich angegeben, aber die proportionale Höhe wird basierend auf der Breite.

http://shears-001-site1.mywindowshosting.com/bet.aspx

Wenn Sie sehen, das untere Bild ist das überlaufen der Zelle darunter. Ich will es gut passen, in der Zelle es ist, und ich don ' T Pflege wenn es komisch aussieht.

EDIT: wie Es scheint, das Problem ist mit der Verwendung von Prozent-Höhen für die divs. Wenn em oder Pixel skaliert werden, richtig, aber Prozent, und es geht nur verrückt.

  • Können Sie uns einige code? Oder in jsfiddle? Ich denke, dass Ihre Bilder in Höhe und Breite sind nicht relativ zur Größe der Zelle. Danke.
  • <td style='padding-top: 0%; padding-bottom: 0%; width: 25%; vertical-align: top;'> <img src='logo.jpg' style='border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #E70303; margin-top: 0%; padding-top: 0%; margin-bottom: 0%; padding-bottom: 0%; width: 100%; height: 50%; display: inline-block;' alt='VGBC-Logo' title='VGBC Logo'> <br> <img src='PM.jpg' style='margin-top: 0%; padding-top: 0%; margin-bottom: 0%; padding-bottom: 0%; width: 100%; height: 50%; display: inline-block;'alt='PM-Logo' title='PM-Logo'> </td>
  • bitte fügen Sie clear und float, wie Links auf img und vermeiden Sie die <br/> zwischen den beiden <img>
  • Ich Tat, und immer noch das gleiche wie es vorher war. Sie sind beide 100% der Zelle Breite, aber nur eine ist 50% der Zelle Höhe.
  • und vermeiden Sie die Höhe nach oben <img>
  • entfernen der Höhe nach oben img-erlaubt die unteren img nicht verschütten über der Zelle, aber jetzt die Zelle ist gestreckt, länger als die Höhe angegeben. Auch, warum das entfernen der Höhe der top-img-damit Sie passen? 50+50=100, also sollte es nicht egal?

InformationsquelleAutor David Shears | 2014-02-12
  1. 1

    Versuchen, diesen code:

    <td style="width: 50%; vertical-align: top;">
  <img src="http://www.jonathanjeter.com/images/Square_200x200.png" style="width: 100%; height: 100%;">
</td>

    oder in css

    img
{
 width: 100%; height: 100%;
}

    Bild vergrößern Höhe css

    • Habe immer noch Probleme mit der Zelle nun mehr als angegeben. Ich will nicht, dass die Zelle sich zu Strecken/komprimieren, nur das Bild.
    InformationsquelleAutor Manoj
  2. 0

    Können Sie so etwas tun

    Fiddle

    td{
    border: 1px solid green;
    position: relative;
    height: 100px;
    width: 200px;
}

.test{
   border-bottom-style: solid; 
   background-color: yellow; 
   width: 100%; 
   height: 50%;    
   position: relative;
}

img{
    position: relative;
    width: 100%; 
    height: 100%;     
}
    • Versuchte dies und es ist das gleiche Problem wie die anderen Vorschläge. Die Zelle wird gedehnt, um eine Größe zu passen die beiden Bilder in Ihrer proportionale Höhen statt, die Unterbringung in der angegebenen Höhe und verkleinern der Bilder.
    InformationsquelleAutor JunM
  3. 0

    ich denke, dass ur beide Bilder sind Verschieden in Höhe thts y u r immer das problem ...versuche zu machen, sowohl Bild-als gleiche Höhe und der Anteil 50 % beide ...

    • Was ist der Punkt und das height-Attribut dann, wenn ich gehen mir aus dem Weg, machen Sie sicher, dass jedes Bild ist genau die gleiche pixel-Größe auf dem Dateisystem?
    • wenn u dnt will, dann gelten die Höhe in pixel in html...ich denke der Prozentsatz enthält einige Art-Problem mit Bildern in ur Fall....u haben zwei Optionen, gilt die Höhe in pixel verändern Sie die Größe der Bild-Datei
    InformationsquelleAutor ishvar
Schreibe einen Kommentar