css-div中图片自适应

最新推荐文章于 2024-07-24 09:41:52 发布

NorthCastle

最新推荐文章于 2024-07-24 09:41:52 发布

阅读量833

点赞数 1

文章标签： css html html5 css3

本文链接：https://blog.csdn.net/qq_39505245/article/details/115296722

版权

CSS-div中图片居中且自适应不同的屏幕分辨率

1.问题描述与解决思路

问题描述

1.在div中放入一张图片
2.如何保证在屏幕的分辨率改变的情况下，确保图片始终居中状态，且不会发生缩放的比例变化

解决思路：

1.div采用相对布局，且设置overflow:hidden；隐藏超出的部分内容
2.img采用绝对布局，通过left与transform将位置设置在居中

2.下面是实现的代码

html : div中放入了一个img

<div id="footer-advert-info">
    <img :src='advert.advertPositionUrl' alt="暂时无法加载广告图片" class="advert-image" 
</div>

css

/* 放图片的div */
  #footer-advert-info{
    border: 0px solid red;
    height: 150px;
    position: relative;
    overflow: hidden;
  }
  /* 图片一直居中的效果 */
 .advert-image{
    position: absolute;
    bottom: 0;
    height: 100%;
    left: 50%;
    transform: translate(-50%);
  }