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

Question

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

htmlcssimagefluid-layoutresponsive-design

5

我正在尝试构建一个流式布局，为此我正在使用以下样式来为大图片添加样式：

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

这个代码可以正常工作，但问题是我无法再使用HTML图片标签中的宽度和高度属性（它们将不起作用）。我需要这些属性，以便浏览器在加载图像之前“保留”所需的空间，这样当图像加载时，页面的其余部分就不会移动。

是否有办法同时实现这两个功能？（流体图像+在图像加载前保存空间）

- HappyDeveloper

根据下面的答案，您的问题似乎并不是在询问它所表面的内容。正如您所说，“我不能再使用HTML图像标记中的宽度和高度属性”。您是否有兴趣按照该短语所示的方式使用它们？您能否提供更多关于您的问题的信息，例如进一步的代码或JS Fiddle？ - hayesgm

@ghayes 我的意思是对于非流体布局，宽度和高度属性可以保存图像所需的空间（我使用内联HTML属性，因为我可以动态使用它们。例如，在图像库中，每个图像的宽度和高度可以有不同的值，所以我不能使用CSS）。对于流体布局，我必须将宽度和高度设置为自动，但我不知道如何告诉浏览器：“看，我有这张图片，宽度为X，高度为Y，我需要你为它保存一些空间。只要记住不要固定这些值，因为我们这里有一个流体布局。” - HappyDeveloper

我怀疑从你的CSS中删除width: auto;可以解决这个问题。 - Olly Hodgson

5个回答

0

按设计，内联样式优先于样式表中的样式。CSS 中的级联顺序是外部样式表（从上到下读取，因此底部会覆盖顶部）、<head> 中的样式（同样是从上到下）、内联样式、用户样式。有很多处理方式，但我不知道它们是否真的是一个好主意，就像被问到的那样。

1）在样式表或头部或内联中设置固定维度，然后在页面下方放置脚本来自动调整维度以覆盖它。 <script>vdivid.style.width = 'auto'</script>

2）创建一个带有固定尺寸的元素，并嵌套在具有自动尺寸的

元素中。但这实际上并没有实现你想要的效果。

3）对图片进行网页优化，使其加载时间不会过长。

4) 像素设置的尺寸通常不适用于流式布局，因为它们是固定的。所以使用#fluiddiv {width:20%;height:20%;}这就是流式布局的工作原理。或者您可以使用em代替%，em基于设备的默认字体大小进行弹性布局，而%则基于窗口或父元素的尺寸（如果它具有除body或顶级包装器之外的父元素）。以这种方式获得非扭曲图像需要...我认为您无法使用%来完成，因此请使用与图像相同比例的em。

- conspiritech

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();">&#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仅用于演示目的，用于切换图像，与布局无交互作用。查看此代码片段

如果图像很大，您应该将它们优化到适当的大小和重量。

- Jean Belmont

-1

您可以使用一个父级 div，其基于宽高比的百分比填充，如此处所述。

这个解决方案很丑陋，我很惊讶尽管流体图像已经存在很久了，但关于这个问题或优雅的解决方案并没有太多讨论。

- user2425962

-2

请使用以下内容：

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

内联样式将覆盖基于优先级的fluid_img类所附加的任何样式。您可以通过在Firebug / Chrome中查看CSS并查看哪些样式应用于您的img来查看此内容。

此外，如果您正在动态插入/更改图像，则可以使用以下jQuery：

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

希望这能帮到你！

- hayesgm

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul Pritchard · Accepted Answer

我也在寻找这个问题的答案。使用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/