CSS - 中心和圆角的 Img 内部 Div

Posted 2023-03-05

【中文标题】CSS - 中心和圆角的 Img 内部 Div

【英文标题】：CSS - center and rounded Img Inside Div

【发布时间】：2016-10-12 19:45:11

【问题描述】：

我的网页上有一个 Div 内的 Img，图像出现在 div 内，但对齐方式因浏览器宽度而异。

这是我的代码：

<div class="w3-row" style="100%; background-color: #fff; margin-top: 5px; height: 100px; padding: 5px;">
    <div class="w3-col w3-container w3-green" style="width: 15%; height: 100%;">
        <div>
            <img class="" src="../images/Joanne.jpg"  style="height: 80px; display: block;  margin-left: auto;  margin-right: auto;">
        </div>
    </div>
    <div class="w3-col w3-container w3-red" style="width: 85%; height: 100%;">

    </div>
</div>

我想知道是否有一种方法可以垂直和水平对齐该 Div 内的图像，并且也许还可以使图像具有圆角。

我已经四处搜索，但我尝试的没有任何效果，我认为通过将左右边距设置为“自动”可以解决我的问题，但是当我调整浏览器大小时图像仍然关闭。

感谢任何帮助或建议。

演示：https://jsfiddle.net/jjxbm7j7/

【问题讨论】：

为此添加 jsdiddle，因为您可以使用边框半径添加圆角。

在此处张贴个人照片时要小心。这仍然是互联网，仍然是一个公共论坛。邪恶无处不在。

【参考方案1】：

对于圆形图像 - 使用边框半径属性

对于垂直居中的图像 - 在具有指定高度的图像的父元素上使用 display:flex 和 align-items:center。

对于水平居中的图像 - display:flex 和 justify-content:center 在具有指定宽度的图像的父元素上。 但是，对于您的示例，我使用了 margin:auto，因为它实际上更简单。

有关 flex 的更多信息，请单击此处：http://www.w3schools.com/css/css3_flexbox.asp

应该是这样的：

.image 
  border-radius: 50px;

.w3-col.w3-container.w3-green 
  display: flex;
  align-items: center;
  margin: auto;

.w3-row 
  border: 1px solid #aaa;

<div class="w3-row" style="100%; background-color: #fff; margin-top: 5px; height: 100px; padding: 5px;">
  <div class="w3-col w3-container w3-green" style="width: 15%; height: 100%;">
    <div>
      <img class="image" src="http://s33.postimg.org/vnc0xbztb/Joanne.jpg

"  style="height: 80px; display: block;  margin-left: auto;  margin-right: auto;">
    </div>
  </div>
  <!--<div class="w3-col w3-container w3-red" style="width: 85%; height: 100%;">

  </div>-->
</div>

为了清楚起见，我添加了 1px 边框属性。

【参考方案2】：

使用 transform: scale() 将您的图像完美居中在 DIV 中

我在里面创建了一个盒子，我已经放置了你的图片，以展示如何在 div(class="box") 内居中放置图片。

body
  width: 100%;
  height: 100vh;
  margin: 0;


.w3-row 
  display: flex; //flexBox
  align-items: center;
  justify-content: center;
  flex-direction: column; //Works as a Stack i.e Image at the Top and Description at the bottom

使用 CSS 转换缩放图像

.image
  width: 100%;
  height: auto;
  transform: scale(.5); //change the scale value to change size of the Image 0<scale<1

圆形图像

.img-rounded
  border-radius: 50%

工作小提琴：https://jsfiddle.net/rittamdebnath/jjxbm7j7/3/

【参考方案3】：

在任何事情之前，编写内联 CSS 都不是好方法，但无论如何你可以像这样在 sudo 元素（之后）上使用垂直对齐方式

.image 
    border-radius: 50px; //adjust yourself
    display: inline-block;
    vertical-align: middle;
  


.w3-col.w3-container.w3-green
   
    text-align:center;
    height:100px;
   border:1px solid;
   width:100%;

.w3-col.w3-container.w3-green:after 
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;

<div class="w3-row" style="100%; background-color: #fff; margin-top: 5px; height: 100px; padding: 5px;">
    <div class="w3-col w3-container w3-green" style="width: 15%; margin:auto;">

            <img class="image" src=" http://s33.postimg.org/vnc0xbztb/Joanne.jpg"  style="height: 80px;  ">

    </div>
    <div class="w3-col w3-container w3-red" style="width: 85%; height: 100%;">

    </div>
</div>