Rand und Padding macht Bild größer

Ich möchte die logo.png drücken, so ist es etwa ein Drittel der Weg über die Seite. Wenn ich ein großes Padding oder einen Rand erzeuge, wird das Bild größer, obwohl der andere Code die Bildgröße begrenzt.Rand und Padding macht Bild größer

.header { 
    width: 200px; 
    height: 60px; 
} 

.class { 
    max-width:100%; 
    max-height:100%; 
    margin-left: 300px; 
} 


<body> 
<div class="header"> 
<table> 
    <tr><td><img src="Logo.png" class="class"></td></tr> 
</table> 
</div> 
</body>

Gibt es eine Möglichkeit, das Bild weiter horizontal zu verschieben, während die Bildgröße gleich bleibt?

Quelle

2016-07-16 crassfh

Das Problem ist folgendes: Mit margin-left auf dem img Tag, das im Inneren des ist td Sie die Breite des td auf den Wert von margin-left ändern (es passt nur die Größe davon Kinder). Um Proportionen zu erhalten, wird das Bild größer. Da Tabellenzellen tut nicht Respekt width und wird auf der Grundlage der width des gesamten table kollabiert werden, müssen Sie die width von table geben Sie eine Einschränkung von width oder vielleicht zu <div> Elemente wechseln zu setzen, wo Sie volle Flexibilität haben.

Der Header width/height begrenzt nicht die Breite/Höhe Ihres table, weil - wie gesagt - es ist anpassen es Kinder Breiten/Höhen. Das innere Element (der Tisch) ist also größer, so dass es seinen Eltern überläuft.

Quelle

2016-07-16 02:53:21 ScientiaEtVeritas

Rand und Padding macht Bild größer

Antwort

Verwandte Themen