我已经被这个问题困了将近两天了,我是一个相当新的程序员,而且它可能很容易解决。
我必须用图像和文字制作一个小游戏,但图像不会调整大小。在他们调整大小之前 <style>
然而我想要它们,但现在它们甚至不会移动一英寸。
我确定样式表已正确链接,因为其他一切工作正常。
这是我的代码,有人能想出解决办法吗?
我已经到处寻找答案,但没有一个符合正确的标准..
body, html {
margin-left: 10%;
margin-right: 10%;
padding: 0px;
height: 100%;
font-family: georgia, "Comic Sans MS";
background-color: #f0f0f0;
}
header {
border-bottom: thick solid grey;
}
footer {
border-top: thick solid grey;
}
.points {
float: right;
}
.plaatje {
width: 100px;
height: 100px;
}
.plaatje2 {
float: left;
width: 25%;
}
.igen {
font-size: 25px;
font-weight: bold;
}
.sprint {
float: right;
}
.copyright {
position: relative;
bottom: 20px;
left: 65px;
font-size: 10px;
}
.img {
background-color: red;
width: 25%;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Words</title>
<link rel="stylesheet" href="css/style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script>
</script>
</head>
<body>
<header>
<span class="fa fa-refresh" style="font-size:25px;"></span><span class="igen"> igen</span>
<span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige: 0 <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: 0</span>
</header>
<div class="container">
<div class="img">
<img src="img/cat.jpg" alt="cat" />
</div>
<div class="img">
<img src="img/beak.jpg" alt="beak" />
</div>
<div class="img">
<img src="img/spoon.jpg" alt="spoon" />
</div>
<div class="img">
<img src="img/milk.jpg" alt="milk" />
</div>
</div>
<footer>
<img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" />
<img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" />
<center><span class="copyright"> ©2013 laerdansk / FC-Sprint² Leerbedrijf bronnen </span></center>
</footer>
</body>
</html>
最佳答案
<div class="img">
<img src="img/spoon.jpg" alt="spoon" />
</div>
错了...
应该是:
<div>
<img class="img" src="img/spoon.jpg" alt="spoon" />
</div>
这样你的 css 将以实际图像为目标并给它一个大小......
.img {
background-color: red;
width: 25%;
height: 100px;
}
关于html - 图像不会在样式或 img 本身中调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35196161/