Question

.cover{
background-color: #212129;
position:relative;
width:100%;
height:50%;}

.profile{
width:120px;
height:120px;
position:absolute;
bottom:-60px;
left:64px;
background-color: black;}

header img{
width:100%;
height:100%;}

<header class="heading">        
    <div class="cover"><!--Main banner-->
        <img src="img/cover.jpg" alt="cover">

        <div class="profile">
            <img class="img img-thumbnail" src="img/dp.jpg" alt="profile">
        </div>
    </div>  
</header

当我改变屏幕尺寸时，配置文件图像没有任何反应。它并没有改变它的大小。我想让它变得敏感。我尝试添加img和img-thumbnail类，但都是徒劳的。请帮我在这个抽象的div中添加响应性

Answer 1

将img-responsive类添加到您的图像

<img class="img img-thumbnail img-responsive" src="img/dp.jpg" alt="profile">
.profile{
width:100%;
height:120px;
position:absolute;
bottom:-60px;
left:64px;
background-color: black;}

Answer 2

您打算如何回应？你的.profile容器的高度和宽度都设置为绝对单位（像素），而.profile中的图像总是大而高100％，所以它是正常的，它不会改变。

您还应该为该容器使用百分比大小，或者使用某些媒体查询为不同的视口定义不同的大小。

Answer 3

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .responsive{width:100%;height:auto;}
    body{margin:0px;padding:0px;}
    </style>
</head>
<body>
    <div class="responsive">
        <p>when i change the size of screen nothing happens with profile image. It didn't change its size. I want to make it responsive. I tried by added img and img-thumbnail classes but all in vain. please help me to add responsiveness in this abstract div</p>
    </div>
</body>
</html>

我怎样才能增加对抽象div的响应能力

3 个答案: