CSS：将图像定位在右下角

Posted 2023-02-25

【中文标题】CSS：将图像定位在右下角

【英文标题】：CSS: position image on bottom right corner

【发布时间】：2019-01-07 17:28:31

【问题描述】：

我有这张图片，我需要把它放在 div 的右下角。

我尝试在 img 标签上使用 margin-right 和 padding-right 0px 但这不起作用。

黑线表示我不需要那个空间

这是一个 CodePen：

https://codepen.io/ogonzales/pen/OrZKOr

<header class="header" id="header1">
    <img class="margin_right_zero" src="https://raw.githubusercontent.com/alphadsy/alpha-ui/master/images/man.png"  >
    <div class="circle">
        <div class="caption">
            <h2 class="title display-3">Alphad <strong>Design & Inpsertion</strong></h2>
            <p>Lorem m nisi! Eum vitae ipsam veniam, ullam explicabo quaerat asperiores veritatis nam reprehenderit necessitatibus sequi.</p>
        </div>
    </div>
</header>

更新 1：

大多数答案解决了底部边距，但不是右边距。

您必须在整页中打开 CodePen 才能看到此详细信息。

【问题讨论】：

当前你的图片有left: 50%，而不是那个，使用right: 0; bottom: 0;

【参考方案1】：

您可以通过以下方式实现：

#header1 img 
    position: absolute;
    right: -10px;
    bottom: 0;

注意-10px，是为了抵消图片中的空白。

https://codepen.io/anon/pen/PXeMgv

【讨论】：

请参阅更新 1。

嗨@OmarGonzales，你能把你的代码笔发给你吗？我链接的那个，我没有从更新 1 中看到您的问题。或者您使用的是哪个浏览器？

刚刚使用了您的 codepen 链接，分叉并在整页中查看：codepen.io/ogonzales/full/QzxLOd

右下角有一点缝隙，不应该有。

@OmarGonzales 已修复 :)

【参考方案2】：

这是因为您的图片使用了position: absolute;。图像的位置主要由top、right、bottom 和left 定义。由于您已经包含了left: 50%，它不会“监听”您的边距和填充设置。

设置以下内容会将您的图像设置为右下角：

#header1 img 
  position: absolute;
  right:0;
  bottom: 0;

希望这会有所帮助！

【参考方案3】：

这可以通过在 css 中定位 absolute 轻松实现。 只需将其添加到您的 CSS

.bottom_right
  position:absolute;
  bottom:0;
  right:0;

并将图片上的类更改为bottom_right

请记住，每个“绝对”元素的容器都需要将其位置设置为relative 因此，将其添加到您的 css 以确保图像永远不会离开其容器

header position:relative; 

这是您的 CodePen 更新： https://codepen.io/anon/pen/JwvgzM

【讨论】：

泰。但这解决了底部，而不是正确的部分。请参阅更新 1。

【参考方案4】：

或将图像移到 html 代码的末尾，这样可以简化工作:-)

<header class="header" id="header1">
    <div class="circle">
        <div class="caption">
            <h2 class="title display-3">Alphad <strong>Design & Inpsertion</strong></h2>
            <p>Lorem m nisi! Eum vitae ipsam veniam, ullam explicabo quaerat asperiores veritatis nam reprehenderit necessitatibus sequi.</p>
        </div>
        <img class="margin_right_zero" src="https://raw.githubusercontent.com/alphadsy/alpha-ui/master/images/man.png"  >
    </div>
</header>

【参考方案5】：

希望这会有所帮助：

.bottomright 
  top: unset;
  left: unset;
  position: absolute;
  bottom: 0;
  right: 0;

【参考方案6】：

这可以全屏显示：

.margin_right_zero  
  bottom: 0;
  margin-left: 24%;

我认为，如果您希望图片出现在平板电脑或移动设备上，那么之后您需要调整响应的百分比值。