位置固定时图像大小发生变化

Question

我正在尝试修复 bottom right corner 的表情符号面板，其宽度和高度与屏幕宽度相关。当 position 为 not fixed 时，它可以正常工作（第一张图片）。但是当 position 变成 fixed 时，背景面板和里面的表情符号 (img) 都会发生奇怪的变化（第二张图片）。

代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    .panel{
                /*position:fixed;*/
                     bottom: 0;
                     right: 0;
                     width:100%;
                     height:7%;
                     background-color:#dbd9d3;
                     border:1px solid black;
                }
         .panel_emojis{
                width: 14%;
                height: 14%;
                margin-right: 1.1%;
                margin-left: 1.1%;
                }
</style>
</head>

<body>
<div class="panel">
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
</div>
</body>
</html>

如何在不影响背景和里面图片大小的情况下将其移动到右下角？

Answer 1

将fixed替换为flex:

flex has come for these kind of purposes, a perfect layout where you can use the flex for responsiveness which works well.

fiddle 进行游戏。

.panel {
  display: flex;
  justify-content: space-between;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 7%;
  background-color: #dbd9d3;
  border: 1px solid black;
}

.panel_emojis {
  width: 14%;
  height: 14%;
  margin-right: 1.1%;
  margin-left: 1.1%;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>

  </style>
</head>

<body>
  <div class="panel">
    <img src="http://placekitten.com/301/301" class="panel_emojis" />
    <img src="http://placekitten.com/301/301" class="panel_emojis" />
    <img src="http://placekitten.com/301/301" class="panel_emojis" />
    <img src="http://placekitten.com/301/301" class="panel_emojis" />
    <img src="http://placekitten.com/301/301" class="panel_emojis" />
    <img src="http://placekitten.com/301/301" class="panel_emojis" />
  </div>
</body>

</html>

Answer 2

CSS

body{
   position: relative; 
}

.panel { 
   position: absolute; 
   bottom: 0; 
   right: 0; 
   width:100%; 
   height:7%; 
   background-color:#dbd9d3; 
   border:1px solid black; 
} 
.panel_emojis{ 
   width: 14%; 
   height: 14%; 
   margin-right: 1.1%; 
   margin-left: 1.1%; 
}

我没有更改任何大小，但我强烈建议不要使用百分比来设置边距。我还会将表情符号的 width/height 设置为固定的 px 宽度和高度而不是百分比。

Answer 3

我认为如果您将 display: flex 添加到 .panel 中以轻松将项目居中放置会很好。使用 position: fixed 时的问题是您没有为 .panel 设置高度，因此受父 .panel 的 height 影响的 .panel_emojis 会看起来很奇怪，因为您按百分比设置 width 和 height。我不认为你应该过度使用 % 来设置，如果你不知道你到底想做什么，请改用 px。

希望对您有所帮助。如有错误请指正

.panel{
  position:fixed;
  display: flex; /* use display: flex; justify-content for auto margin the item inside .panel */
  justify-content: space-between;
  bottom: 0;
  right: 0;
  width:100%;
  background-color:#dbd9d3;
  border:1px solid black;
}

/* Instead of using width, height in .panel_emojis, leave those two attributes to default (auto) */
.panel_emojis{
  // width: 14%;
  // height: 14%;
  margin-right: 1.1%;
  margin-left: 1.1%;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    
</style>
</head>

<body>
<div class="panel">
  <img src="https://via.placeholder.com/120" class="panel_emojis" />
  <img src="https://via.placeholder.com/120" class="panel_emojis" />
  <img src="https://via.placeholder.com/120" class="panel_emojis" />
  <img src="https://via.placeholder.com/120" class="panel_emojis" />
  <img src="https://via.placeholder.com/120" class="panel_emojis" />
  <img src="https://via.placeholder.com/120" class="panel_emojis" />
</div>
</body>

Answer 4

伙计，你只需要删除高度以使表情符号 img 看起来完美我已经根据您的方便编辑了您的代码。我已经删除了高度，以便容器（在本例中为面板）可以根据其中的 img 改变其形状

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    .panel{
                position: fixed;
                     bottom: 0;
                     right: 0;
                     width:100%;
                     /* height:10%; */
                     background-color:#dbd9d3;
                     border:1px solid black;
                }
         .panel_emojis{
                width: 14%;
                height: 14%;
                margin-right: 1.1%;
                margin-left: 1.1%;
                }
</style>
</head>

<body>
<div class="panel">
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
<img src="emoji.png" class="panel_emojis" />
</div>
</body>
</html>

如果你不想删除高度 |您还可以将 panel_emoji 高度更改为 height: 100%; 以便您的 img 可以使用容器的整个高度（在本例中为面板）|在这里向您展示的是我没有删除面板高度的代码，我只是调整了 panel_emoji 高度并且也可以正常工作 [注意：- 我增加了面板高度，所以整个 img 都可以看到]

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    .panel{
                position: fixed;
                     bottom: 0;
                     right: 0;
                     width:100%;
                     height:25%;
                     background-color:#dbd9d3;
                     border:1px solid black;
                }
         .panel_emojis{
                width: 14%;
                height: 100%;
                margin-right: 1.1%;
                margin-left: 1.1%;
                }
</style>
</head>

<body>
<div class="panel">
<img src="emoji.jpg" class="panel_emojis" />
<img src="emoji.jpg" class="panel_emojis" />
<img src="emoji.jpg" class="panel_emojis" />
<img src="emoji.jpg" class="panel_emojis" />
<img src="emoji.jpg" class="panel_emojis" />
<img src="emoji.jpg" class="panel_emojis" />
</div>
</body>
</html>

根据我的建议，您应该为您的表情符号图像添加填充，这样它看起来就很不错了。此外，您不应使用 % 来提供 img 的 height 和 width。

位置固定时图像大小发生变化

Image size changes when position is fixed

html

css

responsive-design