Question

我正在练习用纯HTLML和CSS制作网站。我这里有两张松饼图片。在我的CSS中，我将它们设置为相同的宽度和高度，但是当我在浏览器中查看页面时，右边的松饼图像看起来略大于左边的松饼图像。每个松饼下面的文字也是相互矛盾的。

enter image description here 如何制作松饼图像的尺寸正确？

HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>The Muffin Shoppe</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <header>
      <h1>Welcome to the Muffin Shoppe</h1>
      <h3>We are not gay; but by the taste of our muffins you would think we are!</h3>
    </header>
    <section>
      <div class="muffin-display" id="first">
        <img src="http://upload.wikimedia.org/wikipedia/commons/8/8a/Muffin_NIH.jpg" alt="A fresh blueberry muffin">
        <div class="muffin-text">
          <h3>A fresh blueberry muffin</h3>
          <p>Made by our German migrants in the back</p>
        </div>
      </div>
      <div class="muffin-display" id="second">
        <img src="http://www.dunbarsystems.com/Images/enlarge/blue-berry-muffin-enlarge(o9czf3).jpg" alt="Cancer Causer">
        <div class="muffin-text">
          <h3>The Cancer Causer!</h3>
          <p>We don't call this badboy the cancer causer for no reason</p>
        </div>
      </div>
    </section>
  </body>
</html>

CSS：

body {
  background-image: url(pink.jpg);
}

header {
  background-color: blue;
}

.muffin-display img {
  width: 200px;
  height 200px;
}

.muffin-display p {

}

#first {
  float: left;
  margin-left: 350px;
}

Answer 1

您需要为两个容器定义width和float。此外，如果您将宽度和高度定义为200px，则您希望图像是完美的正方形（并且您的示例不是正确的），或者丢失比率。

您可以定义宽度并指定高度：自动，也可以在插入之前将图像预先裁剪为所需的大小。

试试这个，开头就是：

.muffin-display img {
  width: 200px;
  height: auto;
}

.muffin-display {
  width:300px;
  height:400px; 
  border:1px solid red; //always good to include a temporary border to see how things are getting positioned.
}

#first {
  float: left;
}

#second {
  float: right;
}

Answer 2

我希望这会有所帮助

.muffin-display img {
      width: 200px !important;
      height: 200px !important;
    }

http://jsfiddle.net/sjatsr4z/

CSS：即使在CSS中设置，图像宽度和高度也不会显示相同

2 个答案: