gpt4 book ai didi

responsive-design - 图像不响应浏览器大小

转载 作者:太空宇宙 更新时间:2023-11-04 04:33:50 24 4
gpt4 key购买 nike

我正在尝试使图像响应浏览器大小,这样当浏览器较小时,图像会响应,这样就不会涉及滚动。我在这里发现了一个类似的问题 How can I resize an image dynamically with CSS as the browser width/height changes? ,但我无法使该解决方案起作用。我错过了什么?

我在下面包含我的代码 - 我使用的是 Wordpress,所以它会自动在我的图像周围放置一个“p”标签,将我的图像包装在一个段落中。另外,我不确定我是否为此目的包含了太多代码,但我想确保所有代码都在那里,以防万一在一个奇怪的地方出现错误可能导致问题...

这是我的 html:

<body>
<div id="pop_up_page">
<div class="content_well_pop">
<div class="content_pop">
<div class="portfolio_workspace_9">
<h2>Here's the Header</h2>
</div>
<div class="portfolio_workspace_8">
<p>
<img src="heres_the_image"/>
</p>
</div>
</div>
</div>
</div>
</body>

这是我的 CSS:

body {
background-attachment: fixed;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
height: 100%;
}

#pop_up_page {
background-attachment: fixed;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
height: 100%;

.content_well_pop {
left: 0;
width: 100%;
}

.portfolio_workspace_9 {
width: 1000px;
margin: 15px 0 0 0px;
position: relative;
float: left;
display:block;}

.portfolio_workspace_8 {
width: 1000px;
margin: 0px 0 50px 0px;
position: relative;
float: left;
height: auto;
display:block;}

p{font-family: "Franklin Gothic Book";
font-size: 15px;
color: #757372;
display: block;
}

.portfolio_workspace_8 img {
margin-left: auto;
margin-right: auto;
display: block;
max-width: 100%;
height: auto;
}

谢谢

最佳答案

这里的 css 规则:

.portfolio_workspace_8 {
width: 1000px;
margin: 0px 0 50px 0px;
position: relative;
float: left;
height: auto;
display:block;
}

您在图像的父容器上指定了宽度。将其更改为最大宽度而不是宽度。

关于responsive-design - 图像不响应浏览器大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16740362/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com