Question

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Satch</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
        <div id="wrapper">
        <img src="images/index_02.jpg" id="makeup" class="home">
        <img src="images/index_03.jpg" id="photography"class="home">
        </div>
</body>
</html>

和css

img {
height: 100%;
float:left; 
}
body,html {
margin:0;
padding:0;
}
#wrapper {
margin-left:auto;
margin-right:auto;
text-align:center;
width:100%;
height: 100%;
}

我想要 - 水平居中两个图像 - 确保它们不会以较小的分辨率相互影响

请协助

Answer 1

这是我能提出的最简单的事情，没有更详细的信息。

我们告诉图片不要超过父元素宽度max-width: 50%;的50％。对于此解决方案，图像不会超出其固有宽度。然后，我们使用text-align: center;将父级中的图像居中，因为它们是内联元素。

font-size: 0;的原因是因为两个<img>标记之间的换行符为内联元素创建了空格（将它们视为文本字符）并使容器的内容略大于加起来时容器宽度的100％。因此，较小的视口大小会将第二个图像重排为新行。我喜欢这样的计算：

50% + white space + 50% = 100% + 1

如果您不喜欢font-size: 0;，则标记中的<img>之间不能有任何空格，即<img><img>。

＆＃13;

.img-container {
  font-size: 0;
  text-align: center;
}

.img-container img {
  max-width: 50%;
}

＆＃13;

<div class="img-container">
  <img src="http://placehold.it/400x200/fc0">
  <img src="http://placehold.it/400x200/ccc">
</div>

＆＃13;

Answer 2

只需将max-width: 50%;添加到图片中，请参阅下面的示例。

html,body {
    height: 100%;
}
#wrapper {
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  width:100%;
  height: 100%;
 }
 img {
  height: 100%;
  float:left;
  max-width: 50%;
}

<div id="wrapper">
    <img src="http://placehold.it/350x150" id="makeup" class="home">
    <img src="http://placehold.it/350x150" id="photography"class="home">
</div>

我有两个彼此相邻的图像，我想让它们居中并让它们以较低的分辨率居中

2 个答案: