流体图像：如何设置宽度和高度？答案

【问题标题】：Fluid Images: How to set width and height?流体图像：如何设置宽度和高度？
【发布时间】：2011-10-26 16:55:57
【问题描述】：

我正在尝试构建一个流畅的布局，为此我正在为大图像设置样式：

.fluid_img {
  height: auto;
  width: auto;
  max-width: 100%;
}

这很好用，问题是我不能再在 html img 标签中使用 width 和 height 属性（它们将不起作用）。我需要这些属性，以便浏览器可以在加载图像之前“保存”图像所需的空间，因此在加载图像时页面的其余部分不会移动。

有没有办法同时拥有这两种功能？（流动图像+图像加载前节省的空间）

【问题讨论】：

鉴于下面的答案，您的问题似乎并没有确切地询问似乎在问什么。正如你所说的I can no longer use the width and height attributes in the html image tag。您是否有兴趣按照该短语的建议使用它们？您能否向我们提供有关您的问题的更多信息，例如进一步的代码或 js fiddle？
@ghayes 我要说的是，对于非流体布局，width 和 height 属性可以节省图像所需的空间（我使用内联 html 属性，因为我可以动态使用.例如，在图片库中，每张图片可以有不同的宽度和高度值，所以我不能使用css）。对于流畅的布局，我必须将宽度和高度设置为自动，我不知道如何告诉浏览器：“看，我有这张图片，有 X 宽度和 Y 高度，我需要你节省一些空间为它。记住不要固定这些值，因为我们这里有一个流畅的布局。”
我怀疑从 CSS 中删除 width: auto; 会解决问题。

标签： html css image fluid-layout responsive-design

【解决方案1】：

使用以下内容：

 <img class="fluid_img" src="..." style="width: 50px; height: 100px;">

内联样式将覆盖基于precedence 从 fluid_img 类附加的任何样式。您可以转到 Firebug / Chrome 中的 CSS 并查看哪些样式应用于您的 img。

此外，如果在动态插入/更改图像时有帮助，您可以使用以下 jQuery：

 $('<img>').src('...').css({width: 50, height: 100});

希望这会有所帮助！

【讨论】：

【解决方案2】：

内联样式在设计上凌驾于样式表样式之上。 CSS 中的级联是外部样式表（从上到下阅读，因此底部会覆盖顶部）、<head> 中的样式（也是从上到下）、内联样式、用户样式。有很多方法可以解决这个问题，但我不知道它们中的任何一个是否真的是一个好主意。

1) 在样式表或头部或内联中设置您的固定尺寸，然后使用放置在页面下方的脚本来覆盖它以获取自动尺寸。 <script>vdivid.style.width = 'auto'</script>

2) 将具有固定尺寸的<img> 包裹在具有自动尺寸的<div> 中。这实际上并没有做你想要的。 `

3) 网络优化您的图像，使它们不会花费很长时间来加载。

4) 以像素为单位的尺寸通常不是您在流体布局中使用的东西，因为它们是固定的。 #fluiddiv {width:20%;height:20%;} 也是如此，这就是流畅布局的工作原理。或者您可以使用 em 代替 %。 em 的 flex 基于设备的默认字体大小，而 % 的 flex 基于窗口或父元素的尺寸（如果它的父元素不是 body 或顶级包装器）。要以这种方式获得不失真的图像需要...我认为您不能使用 % 来做到这一点，因此请以与图像相同的比例使用 em。

【讨论】：

【解决方案3】：

您可以使用具有基于纵横比的百分比填充的父 div，如 here 所述。

解决方案很丑陋，我很惊讶虽然流畅的图像真的很老，但很少有人谈论这个问题或优雅的解决方案。

【讨论】：

【解决方案4】：

我也在寻找这个问题的答案。使用max-width、width= 和height=，浏览器有足够的数据应该能够为图像留出适量的空间，但它似乎不起作用方式。

我现在使用 jQuery 解决方案来解决这个问题。它要求您为<img> 标签提供width= 和height=。

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/

【讨论】：

【解决方案5】：

这可以通过现代 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();">&#x21c4;</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 仅用于演示目的，用于切换图像打开和关闭，与布局没有交互。 take a look at this PEN

您应该将图片优化为合适的尺寸和重量，特别是如果它们很大。

【讨论】：