image

最新推荐文章于 2024-07-17 10:09:06 发布

古迪红尘

最新推荐文章于 2024-07-17 10:09:06 发布

阅读量57

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_57246351/article/details/120603330

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>img图片居中显示</title>
    <style>
        div {
            text-align: center;
            /* img图片居中需要给父元素添加属性: text-align: center; */
        }
    </style>
</head>

<body>
    <div>
        <img src="https://img2.baidu.com/it/u=2018114075,2128312823&fm=26&fmt=auto" alt="">
    </div>
    <h1> 图像标签的使用:</h1>
    <img src="img.jpg" />
    <h4> alt 替换文本 图像显示不出来的时候用文字替换:</h4>
    <img src="img1.jpg" alt="我的图片" />
    <h4> title 提示文本 鼠标放到图像上,提示的文字:</h4>
    <img src="img.jpg" title="我的图片" alt="我的图片" />

    <h1> width 给图像设定宽度:</h1>
    <!-- 注意当图片只设定宽或者高时会等比缩放,同时设定宽和高图片会变形 -->
    <img src="img.jpg" alt="我的图片" title="我的图片" width="500" />
    <h4> height 给图像设定高度:</h4>
    <img src="img.jpg" alt="我的图片" title="我的图片" height="100" />
    <h4> border 给图像设定边框:</h4>
    <img src="img.jpg" alt="我的图片" title="我的图片" width="500" border="15" />

</body>

</html>

 <div class="photo" >
     <img :src="item.avatar" alt="" class="tupian">
 </div>




>>>>>
 .photo {
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-color: pink;
    margin-right: 20px;
    
    .tupian{
      width: 100px;
      height: 100px;
      border-radius: 50px;
      background-size: contain;
    }
  }

 <div class="pic"></div>
//背景图片
  .pic {
                width: 2rem;
                height: 2rem;
                // background-color: red;
               background: url('./image/云会计@2x.png');
               background-size: cover;
               background-position: center;
               // background: url("../image/one.png") no-repeat scroll right center transparent;
              }

古迪红尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
image

<div class="photo" > <img :src="item.avatar" alt="" class="tupian"> </div>>>>>> .photo { width: 100px; height: 100px; border-radius: 50px; background-color: pink; margin-right: 20px; .
复制链接

扫一扫