Я делаю простую целевую страницу для веб-сервера на своем компьютере. На данный момент это выглядит хорошо:
<html>
<head>
<title>Felix computer</title>
<style>body{background-color:red;font-family:Zapfino,cursive;text-align:center}img{height:50%}a{text-decoration:none;color:inherit}a:hover{color:blue}</style>
</head>
<body>
<div>
<h1>STOP - Felix computer</h1>
<h2>Here be dragons...</h2>
<img src="dragon.png"><br>
You may be looking for <a href="~frief17">Felix page</a>?
</div>
</body>
</html>
Однако, как только я включаю <!DOCTYPE html>
, он выглядит так:
Я знаю, что это из-за разницы между режимом "стандарты" и "причудами", но что я делаю неправильно? Какую часть CSS интерпретируют по-разному?
Я думаю, что высота вычисляется как процент от ее контейнера, что бесполезно в этом случае.
"Правильным" способом сделать это было бы сделать это фоновым изображением на div, и вы измените размер изображения с background-size
.
Для этого случая быстрого использования вы, вероятно, просто хотите пощекотать высоту вашего тега изображения как атрибут HTML.