网站日常更新3/17

洛幽幽 发布于 2025-03-17 88 次阅读

关于我界面添加了大图，完整显示了图片，也算提升观感了

图：

目前暂时没有发布，等完善功能后发布 源码下（点击html展示）

html 
<style>
.banner {
      position: relative;
      width: 100%;
      height: 400px;
      background: #f0f0f0;
    }
    .banner img {
      position: absolute;
      width: 300px;
    }
.bottom-right {
      bottom: 20px;
      right: 20px;
    }
</style>
<body>
  <div class="banner">
   <img src="" alt="图片加载" class="bottom-right">

使用 position: absolute会使图片脱离正常文档流，所以设置了position: relative与fixed的父容器定位

若没有已定位的祖先元素，图片将相对于 整个页面 定位

对于移动端的适配，使用百分比或 vw/vh 单位实现响应式定位（css）

CSS-移动端优化 
.responsive-img {
  position: absolute;
  left: 10%;
  top: 5vh;
  width: 80%;
}