如何保持图像响应而不影响其他元素？

Question

我正在尝试在文本上方添加图片，但如果我调整该图片的大小，它会影响文本。无论我尝试做什么，它要么失去响应能力，要么将文本移动到屏幕下方（我有一页 'body' 隐藏了溢出）。我设法将图像在高度和宽度上都移动到屏幕中央而不影响下面的文本，但更改它的宽度会使它无响应并移动其他元素。有帮助吗？

简而言之：我想要文字上方的图片，更大，反应灵敏且不影响文字。

.pagr_foto {
  border-style: solid;
  display: flex;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
}

.container {
   
    position: absolute;
    left: 30%;
    top: 64%;
    max-width: 70%; 
  }
  
  .icon {
    width:85px;
    height: auto;
    margin-left: 35%;      
}
.rows {
    display: flex;
    flex-direction: row; 
    width: 80%;
    max-width: 80%;   
    column-gap: 8px;
    margin-left: 5%; 
}

 <div class="container">
           <!--DIDELE FOTKE STARTS-->
    <div class="pagr_foto">
        <div class = "pagr_foto_remas">
            <img src="https://sites.google.com/site/mate02trucha/_/rsrc/1472875957853/config/google_.jpg" class="pagr_foto_img"/>
        </div>

    </div>
   

      <!--DIDELE FOTKE ENDS-->
    <!--TEKSTAS PO APACIA STARTS-->
  <div class = "fadein"> <!--FADE IN ANIMACIJA-->
        <div class="container_text">
            <div class = "rows">
              
            <div class="feature">
                <div style="display:flex;flex-direction:column"> 
                  <!--KAD ICONS BUTU VIRS TEKSTO-->
                <img src="assets/images/group.png" class="icon" />
                <h3>Watch or listen together</h3>
                <p>
                  Start a session and invite your friends by sharing your friend code with them.
                </p>
                </div>
              </div>
              <div class="feature">
                <div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
                <img src="assets/images/list.png" class="icon" />
                <h3>Build up the queue</h3>
                <p>
                  Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
                </p>
                </div>
              </div>
              <div class="feature">
                <div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
                <img src="assets/images/chat.png" class="icon" />
                <h3>Use enhanced features</h3>
                <p>
                  New features are added on top of streaming websites such as real-time chat and timestamp markers.
                </p>
              </div>
              </div>
              </div>
              </div>
              </div>
              </div>

Answer 1

因为您将绝对位置赋予 .pagr_foto。而且您没有提及任何 css 图像。默认情况下，图像标签不会考虑任何其他元素。所以还得自己提风格。

.pagr_foto {
  border-style: solid;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.pagr_foto_img{
 width: 100%;
}

.container {
    position: absolute;
    left: 30%;
    top: 64%;
    max-width: 70%; 
  }
  
  .icon {
    width:85px;
    height: auto;
    margin-left: 35%;      
}
.rows {
    display: flex;
    flex-direction: row; 
    width: 80%;
    max-width: 80%;   
    column-gap: 8px;
    margin-left: 5%; 
}

<div class="container">
           <!--DIDELE FOTKE STARTS-->
    <div class="pagr_foto">
        <div class = "pagr_foto_remas">
            <img src="https://sites.google.com/site/mate02trucha/_/rsrc/1472875957853/config/google_.jpg" class="pagr_foto_img"/>
        </div>

    </div>
   

      <!--DIDELE FOTKE ENDS-->
    <!--TEKSTAS PO APACIA STARTS-->
  <div class = "fadein"> <!--FADE IN ANIMACIJA-->
        <div class="container_text">
            <div class = "rows">
              
            <div class="feature">
                <div style="display:flex;flex-direction:column"> 
                  <!--KAD ICONS BUTU VIRS TEKSTO-->
                <img src="assets/images/group.png" class="icon" />
                <h3>Watch or listen together</h3>
                <p>
                  Start a session and invite your friends by sharing your friend code with them.
                </p>
                </div>
              </div>
              <div class="feature">
                <div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
                <img src="assets/images/list.png" class="icon" />
                <h3>Build up the queue</h3>
                <p>
                  Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
                </p>
                </div>
              </div>
              <div class="feature">
                <div style="display:flex;flex-direction:column"><!--KAD ICONS BUTU VIRS TEKSTO-->
                <img src="assets/images/chat.png" class="icon" />
                <h3>Use enhanced features</h3>
                <p>
                  New features are added on top of streaming websites such as real-time chat and timestamp markers.
                </p>
              </div>
              </div>
              </div>
              </div>
              </div>
              </div>

Answer 2

为什么不使用 Bootstrap 而不是 CSS3？例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<title>Sample</title>
</head>
<body>

<div class="container">
<div class="row">
    <div class="col-12">
        <img class="img-fluid" src="https://sites.google.com/site/mate02trucha/_/rsrc/1472875957853/config/google_.jpg" class="pagr_foto_img"/>
    </div>

<div class="row">
    <div class="col-4">
           <img class="img-fluid" src="https://estaticos.muyinteresante.es/media/cache/1140x_thumb/uploads/images/gallery/59c4f5655bafe82c692a7052/gato-marron_0.jpg" class="icon" />
            <h3>Watch or listen together</h3>
            <p>
              Start a session and invite your friends by sharing your friend code with them.
            </p>
    </div>
    <div class="col-4">
            <img class="img-fluid" src="https://dam.ngenespanol.com/wp-content/uploads/2019/02/gatos-caja-2.png" class="icon" />
            <h3>Build up the queue</h3>
            <p>
              Browse for your favorite media and add the URL to the queue. A number of popular websites are already supported for playback.
            </p>
    </div>
    <div class="col-4">
            <img class="img-fluid" src="https://ichef.bbci.co.uk/news/640/cpsprodpb/10E9B/production/_109757296_gettyimages-1128004359.jpg" class="icon" />
            <h3>Use enhanced features</h3>
            <p>
              New features are added on top of streaming websites such as real-time chat and timestamp markers.
            </p>
    </div>
</div>
</div>
</div>

如何保持图像响应而不影响其他元素？

How to keep an image responsive and not effect other elements?

html

css

positioning

image

responsive