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

标签 html css image image-resizing

我已经被这个问题困了将近两天了,我是一个相当新的程序员,而且它可能很容易解决。

我必须用图像和文字制作一个小游戏,但图像不会调整大小。在他们调整大小之前 <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>

最佳答案

 <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/

相关文章:

javascript - 滚动到一个 div,只有一个滚动,已经相互滚动的 div

javascript - 在 jQuery 中使用\n 换行符设置文本

css - 图像映射是最好的解决方案吗?

javascript - 无法显示姓氏 facebook js sdk?

javascript - 工具提示随 d3 地理 map 缩放(缩放)

css - IE svg 缩放问题

html - 如何在 Flexbox 中使用 Order

javascript - 如何使用CSS和js为div内的每个图像制作一个关闭按钮

python - 如何解决网站上的 html5_webcam 问题?

ios - iPhone应用程序映射当前用户位置GIF