我正在尝试构建一个流畅的布局，为此我正在设计大图像的样式：
.fluid_img {
height: auto;
width: auto;
max-width: 100%;
}
这很好用，问题是我不能再在 html img 标签中使用 width 和 height 属性（它们没有效果）。我需要这些属性，以便浏览器可以在加载图像之前“保存”图像所需的空间，因此在加载图像时页面的其余部分不会移动。
有没有办法同时拥有这两个功能？（流体图像+图像加载前节省的空间）
问问题
13400 次
5 回答
2
我也在寻找这个问题的答案。使用max-width,width=和height=，浏览器有足够的数据，它应该能够为图像留出适量的空间，但它似乎并不能那样工作。
我现在使用 jQuery 解决方案解决了这个问题。它要求您为您的标签提供width=and 。height=<img>
CSS：
img { max-width: 100%; height: auto; }
HTML：
<img src="image.png" width="400" height="300" />
jQuery：
$('img').each(function() {
var aspect_ratio = $(this).attr('height') / $(this).attr('width') * 100;
$(this).wrap('<div style="padding-bottom: ' + aspect_ratio + '%">');
});
这会自动应用以下技术：http: //andmag.se/2012/10/responsive-images-how-to-prevent-reflow/
于 2013-10-28T21:47:06.223 回答
0
内联样式通过设计覆盖样式表样式。CSS 中的级联是外部样式表（从上到下阅读，所以底部会覆盖顶部）、样式<head>（也是从上到下）、内联样式、用户样式。有很多方法可以解决这个问题，但我不知道它们中的任何一个是否真的是一个好主意，正如所问的那样。
1）在样式表或头部或内联中设置您的固定尺寸，然后使用放置在页面下方的脚本来覆盖它以获取自动尺寸。 <script>vdivid.style.width = 'auto'</script>
2）制作一个<img>固定尺寸的包装在<div>自动尺寸中。这实际上并没有做你想要的。`
3）网络优化您的图像，使它们不会花费很长时间来加载。
4) 以像素为单位设置的尺寸通常不是您在流体布局中使用的东西，因为它们是固定的。这#fluiddiv {width:20%;height:20%;}就是流体布局的工作原理。或者您可以使用 em 代替 %。em 的 flex 基于设备的默认字体大小，而 % 的 flex 基于窗口或父元素的尺寸（如果它的父元素不是 body 或顶级包装器）。要以这种方式获得不失真的图像需要...我认为您不能使用 %'s 来做到这一点，因此请以与图像相同的比例使用 em's。
于 2013-04-10T19:10:34.267 回答
0
这可以通过现代 CSS3 和 HTML5 语义元素轻松完成。
使用“nav、main、figure、article 和 section”之类的标签，您可以获得网站的连贯结构，然后使用 CSS GRID 和 CSS 变量将一些样式应用于文档。您将毫不费力地完成工作，甚至不需要 Javascript。
看这个例子：
@charset "UTF-8";
:root{
--w:#fff;
--x:100%/600;
--bu:#e15f41;
--m:#786fa6;
--v:400;
--n:#f8a5c2;
--z:400/600;
--t:#333;
--r: calc(var(--z)*100%);
--b:#000;
}
body{
margin: 1rem;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
color: var(--t);
vertical-align: baseline;
box-sizing: border-box;
font-family: sans-serif;
background-color: var(--b);
min-width: 100px;
display: grid;
}
nav{
text-align: center;
background-color: var(--n);
padding: .3rem;
}
h1, h2, h3{
color: var(--w);
}
ul{
display: grid;
grid-template-columns: repeat(5, 1fr);
list-style: none;
padding: .2rem;
}
a{text-decoration: none; color: var(--b);}
a:hover{color:var(--w);text-shadow: 1px 1px 3px var(--t);}
main{
display: grid;
min-width: 100px;
background-color: var(--m);
padding: 1em;
}
figure{
--i:calc(var(--x)*var(--v));
margin: 0;
position: relative;
border: 4px solid white;
padding-top: var(--i);
}
img{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #888;
}
button{
background-color: var(--bu);
position: fixed;
width: 50px;
height: 50px;
font-size: 1.2rem;
bottom: 15px;
right: 15px;
z-index: 100;
padding: 10px;
border-radius: 50%;
outline: 0;
box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.5);
}
button:hover{
--buh:#e77f67;
cursor: pointer;
background-color: var(--buh);
}
@media only screen and (min-width: 600px){
main{
padding: 1.5em;
min-width: 100px;
background-color: var(--m);
display: grid;
grid-template-columns: repeat(2,1fr);
grid-gap: .5em;
}
}
@media only screen and (min-width: 1080px){
main{
padding: 2em;
min-width: 100px;
background-color: var(--m);
display: grid;
grid-template-columns: repeat(3,1fr);
grid-gap: .8em;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="master.css">
<title>Document</title>
</head>
<body>
<header>
<nav>
<h1>site title</h1>
<ul class=''>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h3>Random Title</h3>
<figure>
<img class="on-off" src="" alt="image not found">
</figure>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</section>
<section>
<h3>Random Title</h3>
<figure>
<img class="on-off" src="" alt="image not found">
</figure>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</section>
<section>
<h3>Random Title</h3>
<figure>
<img class="on-off" src="" alt="image not found">
</figure>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</section>
<section>
<h3>Random Title</h3>
<figure>
<img class="on-off" src="" alt="image not found">
</figure>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</section>
<section>
<h3>Random Title</h3>
<figure>
<img class="on-off" src="" alt="image not found">
</figure>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</section>
<section>
<h3>Random Title</h3>
<figure>
<img class="on-off" src="" alt="image not found">
</figure>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</section>
<section>
<h3>Random Title</h3>
<figure>
<img class="on-off" src="" alt="image not found">
</figure>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</section>
<section>
<h3>Random Title</h3>
<figure>
<img class="on-off" src="" alt="image not found">
</figure>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</section>
<section>
<h3>Random Title</h3>
<figure>
<img class="on-off" src="" alt="image not found">
</figure>
<article><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></article>
</section>
</main>
<footer>
<button type="button" onclick="onOff();">⇄</button>
</footer>
<!--The following javascript is for demonstration purposes only and is not necessary-->
<script>
function onOff() {
let images = document.querySelectorAll('.on-off');
for (let i = 0; i < images.length; i++) {
if (images[i].getAttribute('src')=="") {
images[i].setAttribute('src', "https://upload.wikimedia.org/wikipedia/commons/6/6b/Delizia_del_Verginese%2C_tra_arte_e_natura.jpg")
}
else {
images[i].setAttribute('src', "")
}
}
};
</script>
</body>
</html>重要的提示：
javascript 它仅用于演示目的，用于打开和关闭图像，并且与布局没有交互。看看这支笔
您应该将图像优化为适当的尺寸和重量，尤其是在它们很大的情况下。
于 2018-07-25T22:07:01.403 回答
-1
您可以使用基于纵横比的百分比填充的父 div，如此处所述。
解决方案很丑陋，我很惊讶虽然流体图像真的很老，但没有太多谈论这个问题或优雅的解决方案。
于 2013-05-27T18:25:36.893 回答
-2
使用以下内容：
<img class="fluid_img" src="..." style="width: 50px; height: 100px;">
inline-styles 将覆盖基于优先级从fluid_img类附加的任何样式。您可以通过转到 Firebug/Chrome 中的 CSS 并查看哪些样式应用于您的.img
此外，如果在动态插入/更改图像时有帮助，您可以使用以下 jQuery：
$('<img>').src('...').css({width: 50, height: 100});
希望这可以帮助！
于 2011-08-14T07:44:21.357 回答