如何解决我正在做一个 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%;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。