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

时间：2011-08-14 07:40:14

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

我正在尝试构建一个流畅的布局，我正在使用以下方式设置大图像：

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

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

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

5 个答案:

答案 0 :(得分：2)

我也在寻找这个问题的答案。使用max-width，width=和height=，浏览器有足够的数据，应该能够为图像留出适当的空间，但它只是没有似乎这样工作。

我现在用jQuery解决方案解决了这个问题。它要求您为width=代码提供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/

上看到的技术

答案 1 :(得分：0)

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

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

2）使用自动尺寸的<img>包含固定尺寸的<div>。这实际上并不是你想要的。 `

3）web优化您的图像，以便它们不会花费很长时间来加载。

4）以像素为单位设置的尺寸通常不是您在流体布局中使用的尺寸，因为它们是固定的。 #fluiddiv {width:20%;height:20%;}这就是流畅的布局如何运作。或者您可以使用em而不是％。 em是基于设备的默认字体大小的flex，而％'是基于窗口或父元素的维度（如果它具有除主体或顶级包装之外的父级）的flex。要获得非扭曲图像，这种方式需要......我不认为你可以用％来做，所以使用与图像相同比例的em。

答案 2 :(得分：0)

这可以通过现代CSS3和HTML5语义元素轻松完成。

使用诸如“ nav，main，dig，article和section”之类的标签，您可以为您的网站获得一个连贯的结构，然后使用CSS GRID和CSS变量将某种样式应用于文档。您将毫不费力地完成工作，甚至不需要Java脚本。

看这个例子：

@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

     

您应该将图像优化为适当的尺寸和重量，   尤其是如果它们很大。

答案 3 :(得分：-1)

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

解决方案很难看，我很惊讶虽然流畅的图像真的很老，但是没有太多谈论这个问题或优雅的解决方案。

答案 4 :(得分：-2)

使用以下内容：

 <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});

希望这有帮助！

相关问题
最新问题