根据像素值将图像放置在 div 中答案

【问题标题】：Placing images in a div based on the pixel values [duplicate]根据像素值将图像放置在 div 中
【发布时间】：2019-12-23 20:58:17
【问题描述】：

您好，我有一个 div，它是我的导航栏，当我想将我的徽标放在导航栏中时。

代码

<div class="first_bar">
      <img class="home" src="../../assets/Home Unclicked-01.png">
      <img class="energy" src = "../../assets/Enerygy panel Unclicked-01.png">
 </div>

.first_bar{
    background-color: #cdf7fb;
    height: 52px;
}

.home {
    width: 30px;
    height: 30px;
}

.energy {
    width: 30px;
    height: 30px;
}

我将此作为我的参考，并想创建类似的东西。

我无法将我的图标如上图所示，如何调整图标的大小使其看起来像上图。

示例图片 -

有人可以帮我解决这个问题吗？

谢谢。

按照给出的答案，

看起来，

如何获得我的徽标周围的间距，如第一张图片所示？

【问题讨论】：

目前，您的图像设置为30px 宽30pxhigh，这是您想要的吗？看到这个jsFiddle。并且您希望的行为是 both 徽标旁边并水平居中吗？
你的“home”标志小于“energy panel”标志？
我的主页图标图片是 130*163 px ;能量图标图片为283*163px

标签： html css

【解决方案1】：

您可以尝试将您的图像转换为 div 并为 div 设置 height: 100%; 和 width: 105px; 并调整您想要的图像大小，如下所示：

HTML：

<div class="first_bar">
  <div class="image-item">
    <img class="home" src="en.png">
  </div>
  <div class="image-item">
    <img class="energy" src = "en.png">
  </div>
</div>

CSS：

.first_bar{
  background-color: #cdf7fb;
  height: 52px;
}

.image-item {
  width: 105px;
  height: 100%;
  display: flex;
  align-content: center;
}

.home {
/*Your custom height and width for this image*/
}

.energy {
/*Your custom height and width for this image*/
}

编辑：按百分比增加或减少图像尺寸。例如您的主页图标，您可以将高度从 130px 更改为 105px，并根据减少的百分比计算宽度，在这种情况下，它可以是 131.6px。

对于计算，您可以使用这样的在线计算器：https://percentagecalculator.net/

【讨论】：