我正在练习使用纯 HTLML 和 CSS 制作网站。我这里有两张松饼图片。在我的 CSS 中，我将它们设置为相同的宽度和高度，但是当我在浏览器中查看页面时，右侧的松饼图像似乎比左侧的略大。每个松饼下面的文字也相互矛盾。
我该怎么做才能使松饼图像的大小正确？
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;
}
最佳答案
您需要为两个容器定义宽度和 float 。此外，如果您将宽度和高度定义为 200 像素，您希望图像是完美的正方形(而您的示例不是)，或者失去比例。
您可以定义宽度并指定高度:自动，或者在插入图像之前将图像预先裁剪到所需的大小。
试试这个，只是开始:
.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;
}
关于html - CSS:即使在 CSS 中设置，图像的宽度和高度也不相同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27212272/