我如何为摘要添加响应能力 div

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 Class 到您的图像

<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

你打算用responsive做什么？您的 .profile 容器的高度和宽度都设置为绝对单位（像素），并且 .profile 中的图像将始终是它的 100% 大和高，所以它不会改变是正常的。

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

我如何为摘要添加响应能力 div

how can i add responsiveness to an abstract div

html

css

responsive