css不同尺寸图片不缩放

最新推荐文章于 2025-05-14 11:23:55 发布

January1207

最新推荐文章于 2025-05-14 11:23:55 发布

阅读量687

点赞数

分类专栏： css 文章标签： css html javascript

本文链接：https://blog.youkuaiyun.com/weixin_41940856/article/details/123353410

版权

css 专栏收录该内容

1 篇文章

订阅专栏

这个博客展示了如何利用Vue的v-for指令和CSS样式实现一个响应式的图片展示布局。通过设置img元素的max-width和max-height属性，配合transform:translate(-50%,-50%)来确保图片在不同尺寸的容器中居中显示，从而达到适应不同屏幕尺寸的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div
v-for="(item, index) in list"
:key="index"
class="img"
>
  <img :src="item" alt="" />
</div>



//css
    .img {
      width: 500px;
      height: 500px;
      img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }