2012-04-22 27 views
5

Problem CSS/HTML.Obraz nie wypełnia div

To jest szalone - mogę tylko założyć, że jestem idiotą. Nie mogę sprawić, by mój obraz wypełnił element div, w którym się znajduje. Pod obrazem znajduje się "dopełnienie" 5px.

Oto html:

<!doctype html> 

<head><link rel="stylesheet" href="style.css" type="text/css" /></head> 

<body> 
<div class="row"> 
<img src="pic2.jpg" /> 
</div> 
</body> 

A oto CSS:

body, .row, img { 
padding: 0; 
margin: 0; 
border: none; 
} 

.row { 
width: 80%; 
background-color: orange; 
} 

img{ 
width: 50%; 
} 

Jest to wynikiem:

http://imgur.com/yELMe

Jak widać, The (głupi) niebieski i czerwony obraz nie wypełnia pomarańczowego div. Pod obrazem widać spójne 5 pikseli pomarańczy. Nie ma na to wpływu zmiana% szerokości elementu div lub obrazu lub zmiana rozmiaru okna.

Mogę to naprawić z "marginesem: -5px;", ale chcę wiedzieć, dlaczego tak się dzieje (zwłaszcza jeśli w innych okolicznościach kwota jest mniejsza lub równa 5px).

Dzięki za pomoc (i ponownie przepraszam, jeśli jest to śmieszny błąd z mojej strony).

+0

Oto żywy przykład http://jsfiddle.net/aDtUm/ – jacktheripper

Odpowiedz

17

Dodaj wartość vertical-align (inny niż domyślny baseline) do obrazu, takich jak: top, middle ...

vertical-align: top; 
+0

To niesamowite - dlaczego to się stało? – jkdune

+1

Występuje "naruszenie" w przypadku naturalnej unoszonej strony dla obrazów śródliniowych (niepłaskich), które zaczynają szanować przestrzenie elementów przewidziane dla typografii, takie jak rozmiar czcionki, wysokość linii i inne. Możesz to łatwo przetestować (w niedziałającej wersji demonstracyjnej): po prostu dodaj ciało {rozmiar-czcionki: 50px;}, a zobaczysz, jak zwiększy się margines-przestrzeń. Ustawiając pionowe wyrównanie do obrazów, zapewniamy miejsce docelowe inne niż domyślne w przeglądarce. –

+0

Dobra, rozumiem. Nigdy bym tego nie wymyślił. Jeszcze raz dziękuję za pomoc! – jkdune

Powiązane problemy