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

【问题标题】：How to keep an image responsive and not effect other elements?如何保持图像响应而不影响其他元素？
【发布时间】：2021-06-07 14:09:42
【问题描述】：

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

简而言之：我希望该图像位于文本上方，更大、响应迅速且不影响文本。

.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>

【问题讨论】：

标签： html css image responsive positioning

【解决方案1】：

为什么不使用 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>

【讨论】：

我实际上从未将 bootsrap 用于这些目的，我可能应该这样做。我怎样才能确保这些图像居中？
使用 Bootstrap，非常简单，不像 CSS3 那样复杂，代码更简洁，以确保您可以将图像插入 div 并使用类文本中心，例如这样。

【解决方案2】：

因为您将绝对位置赋予 .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>

【讨论】：

感谢您的帮助！现在我的图像位置很好，但是，如果我改变图像的高度，它就会停止垂直响应。我应该只添加媒体查询还是调整图像本身的大小，而不是在 CSS 中？
尝试从 pagr_foto_img 中删除高度。如果它不起作用，请使用媒体查询。