我正在做一个 Portfolio 项目，我想让图像响应

问题描述

Bootstrap 已经使相对图像具有响应性，但绝对图像没有响应，当您切换到移动设备时，会减小浏览器上的屏幕尺寸，其他图像会错位。

.title-img {
  position: relative;
  width: 100%;
  height: 100%;
}
.skill-back {
  position: absolute;
  bottom: 25%;
  top: 10%;
  right: 6%;
  width: 50%;
  height: 100%;
  opacity: 0.5;
  z-index: -1;
}
.html {
  position: absolute;
  z-index: 4;
  width: 15%;
  height: auto;
  top: 450px;
  left: 75%;
}
.css {
  position: absolute;
  width: 10%;
  top: 70%;
  left: 52%;
  z-index: 3;
  height: auto;
}
.js {
  position: absolute;
  width: 8%;
  left: 79%;
  top: 38%;
  z-index: 1;
  height: auto;
}

<div class="profile col-lg-6">
            <img class="skill-back" src="images/skill-back.svg" alt="black-circle">
            <img class="html" src="images/html-skill.svg" alt="html-skill">
            <img class="js"src="images/js-skill.svg" alt="">
            <img class="css"src="images/css-skill.svg" alt="">
            <img class="title-img" src="images/developerboy.svg" alt="developerboy">
          </div>

解决方法

您可以使用 CSS 媒体查询使您的图片具有响应性，以便所有用户都能准确查看。请将代码添加到您的以下：--

/*for laptop/PC*/
    @media (max-width: 1400) {
    /*Applies to all the img html tag*/
      img {
        width: 100%;
      }
    }  
/* For tablets */
    @media (max-width: 800) {
    /*Applies to all the img html tag*/
      img {
        width: 80%;
      }
    }   
/* For Mobile Phones */
    @media (max-width: 400) {
    /*Applies to all the img html tag*/
      img {
        width: 80%;
      }
    }