css怎么让照片居中显示

css怎么让照片平铺居中显示，如图二图三


<view class="shop-bug">
                        <image class="shop-img" src="../../static/tab/img.jpg">image>
                    view>

.shop-img {
        width: 90%;
        height: 200px;
        border-radius: 20px;
        background-color: #2cb6fe;
        margin-left: 5%;
        margin-top: 20px
    }

img

img

img

以下内容部分参考ChatGPT模型：

可以使用以下CSS样式来让照片平铺居中显示：

.shop-img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

解释：

  1. display: block; 让图片显示为块级元素，可以设置宽度和高度。
  2. margin: 0 auto; 让图片在其容器中水平居中。
  3. max-width: 100%; 让图片最大宽度为其容器的宽度，以防止图片过大。
  4. height: auto; 让图片高度自适应，以保持其宽高比。

示例代码：

HTML：

<div class="shop-bug">
  <img class="shop-img" src="example.jpg" alt="Example Image">
</div>

CSS：

.shop-img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

如果我的建议对您有帮助、请点击采纳、祝您生活愉快

改成这样试试：

.shop-img {
  background-image: url('../../static/tab/img.jpg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  width: 90%;
  height: 200px;
  border-radius: 20px;
  background-color: #2cb6fe;
  margin-left: 5%;
  margin-top: 20px;
}

图片 居中不如说是 view 居中 。外面的盒子居中了里面的图片 设置 宽高100% 就行了 。margin:0 auto 就能让view 居中 或者 flex 布局 display :flex ;然后 align-item:"center"

1、首先是展示图片被拉伸的问题：image 有个mode属性，可以设置为widthFix，固定宽度，然后回自适应展示高度
2、其次居中可以设置父级的css为align-item:center