图像不会在样式或img本身中调整大小

我已经将这个问题困住了将近两天了，我是一个相当新的程序员，可能很容易解决。图像不会在样式或img本身中调整大小

我必须制作一个包含图片和文字的小游戏，但图片不会调整大小。然后，他们只需调整<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">&nbsp;igen</span> 
 
<span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige: &nbsp;&nbsp;&nbsp; 0 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte: &nbsp;&nbsp;&nbsp; 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"> &copy;2013 laerdansk/FC-Sprint&sup2; Leerbedrijf bronnen </span></center> 
 
</footer> 
 

 
</body> 
 
</html>

来源

2016-02-04 A.Jaasma

你喜欢.img在你的样式表中，它会使它成为一个类，所以要么从样式中删除.img中的点或者在你的html中添加class =“img” –

<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; 
}

来源

2016-02-04 08:42:55 foreyez

您需要的div类img下指定的图像作为img。所以，它应该是这样的：

.img img { 
    background-color: red; 
    width: 25%; 
    height: 100px; 
}

但作为@foreyez说，它总是更好的做法，给你的类一个更好的名字，所以你可以在HTML/CSS的默认参数，如img

这里区分是你的代码： https://jsfiddle.net/debraj/2dyn6vbt/

来源

2016-02-04 08:57:06 DebRaj

图像不会在样式或img本身中调整大小

回答

相关问题