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

Posted 2023-03-05

【中文标题】根据像素值将图像放置在 div 中

【英文标题】：Placing images in a div based on the pixel values [duplicate]

【发布时间】：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

【参考方案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/