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

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

html css image

Html 如何保持图像的响应性而不影响其他元素？,html,css,image,responsive,positioning,Html,Css,Image,Responsive,Positioning,我试图在文本上方包含一个图像，但是如果我调整该图像的大小，它会影响文本。无论我尝试做什么，它要么会失去响应能力，要么会在屏幕下移动文本（我有一个带有隐藏溢出的页面“body”）。我设法将图像在高度和宽度上移动到屏幕中央，而不会影响下面的文本，但更改其宽度会使其无响应并移动其他元素。有什么帮助吗简言之：我希望图像位于文本上方，更大，响应速度更快，不会影响文本 .pagr\u foto{ 边框样式：实心；显示器：flex；证明内容：中心；位置：绝对位置；宽度：100%；身高：100%；

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

简言之：我希望图像位于文本上方，更大，响应速度更快，不会影响文本

.pagr\u foto{
边框样式：实心；
显示器：flex；
证明内容：中心；
位置：绝对位置；
宽度：100%；
身高：100%；
}
.集装箱{
位置：绝对位置；
左：30%；
最高：64%；
最大宽度：70%；
}
.图标{
宽度：85px；
高度：自动；
左边缘：35%；
}
.行{
显示器：flex；
弯曲方向：行；
宽度：80%；
最大宽度：80%；
柱间距：8px；
左缘：5%；
}


一起看或者一起听

启动一个会话，通过与朋友共享您的朋友代码来邀请他们。

排队

浏览您喜爱的媒体并将URL添加到队列中。许多流行网站已经支持播放。

使用增强功能

在流媒体网站上增加了新功能，如实时聊天和时间戳标记。

因为您将绝对位置赋予.pagr\u foto。而且你没有提到任何图像的css。默认情况下，图像标记不考虑任何其他元素。所以你必须自己提风格

.pagr\u foto{
边框样式：实心；
显示器：flex；
证明内容：中心；
宽度：100%；
身高：100%；
}
pagr_fou img先生{
宽度：100%；
}
.集装箱{
位置：绝对位置；
左：30%；
最高：64%；
最大宽度：70%；
}
.图标{
宽度：85px；
高度：自动；
左边缘：35%；
}
.行{
显示器：flex；
弯曲方向：行；
宽度：80%；
最大宽度：80%；
柱间距：8px；
左缘：5%；
}


一起看或者一起听

启动一个会话，通过与朋友共享您的朋友代码来邀请他们。

排队

浏览您喜爱的媒体并将URL添加到队列中。许多流行网站已经支持播放。

使用增强功能

在流媒体网站上增加了新功能，如实时聊天和时间戳标记。

为什么不使用引导而不是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>


样品


一起看或者一起听

启动一个会话，通过与朋友共享您的朋友代码来邀请他们。

排队

浏览您喜爱的媒体并将URL添加到队列中。许多流行网站已经支持播放。

使用增强功能

在流媒体网站上增加了新功能，如实时聊天和时间戳标记。

谢谢您的帮助！现在我的图像位置很好，但是，如果我改变图像的高度，它将停止垂直响应。我是否应该添加媒体查询或调整图像本身的大小，而不是CSS？请尝试从pagr_fotto_img中删除高度。如果它不起作用，就使用媒体查询。实际上，我从未使用过bootsrap来实现这些目的，我可能应该这样做。如何确保这些图像居中？使用Bootstrap，非常简单，不像CSS3那样复杂，更干净的代码，以确保可以将图像插入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>