2017-06-05 7 views
-1

Ich habe dieses html Codebeispiel. Wenn ich ein internal css wie folgt schreibe, funktioniert es gut. Aber wenn ich es mit einem ID selector implementieren wird es nicht.ID-Selektor funktioniert nicht in CSS

Das Problem ist, Bildgröße ist mehr als es sein sollte.

Hier ist der Code ohne ID selector

<!DOCTYPE html> 
<html> 
<head> 
    <title>Omicron.com</title> 
</head> 
<body> 
    <div> 
     <img src="Header.png" alt="Header not Found" style="width:100%;min-width:10px;height:auto;position:relative;top:50px;"> 
    </div> 
</body> 
</html> 

enter image description here


und hier ist der Code mit ID selector und hier ist seine Vorschau

<!DOCTYPE html> 
<html> 
<head> 
    <title>Omicron.com</title> 
<style> 
#headerImage{ 
    width: 100%; 
    min-width: 10px; 
    height: 50px; 
    position: relative; 
    top: 50px; 
} 
</style> 
</head> 
<body> 
    <div id="headerImage"> 
     <img src="Header.png" alt="Header not Found"> 
    </div> 
</body> 
</html> 

enter image description here

Kann mir jemand sagen, was mache ich falsch?

+0

Sie müssen '# headerImage' ändern, um' #headerImage img' –

+0

@AnilM oder einfach nicht die ID in der 'div' setzen, und steckt es in dem' img' statt, etwa so: ' marcellothearcane

+0

@marcellothearcane: Dann wird nicht funktionieren :( –

Antwort

2

Ihr div mit id="headerImage" ist das #headerImage Element. Im ersten Beispiel haben Sie Stile auf img angewendet. Im zweiten Beispiel wenden Sie Stile auf das div an. Um Stile auf die img innerhalb von #headerImage anzuwenden, verwenden Sie #headerImage img als Selektor.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Omicron.com</title> 
 
<style> 
 
#headerImage img { 
 
    width: 100%; 
 
    min-width: 10px; 
 
    height: 50px; 
 
    position: relative; 
 
    top: 50px; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
    <div id="headerImage"> 
 
     <img src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="Header not Found"> 
 
    </div> 
 
</body> 
 
</html>

0

Sie müssen das Bild zum Ziel, nicht seine Mutter div.

#headerImage img{ 
    width: 100%; 
    min-width: 10px; 
    height: 50px; 
    position: relative; 
    top: 50px; 
}