Question

由于某种原因，标题图片没有达到笔记本电脑的整个宽度。但它的尺寸从小到中（手机到笔记本电脑）。但它并没有比这更进一步。这是我使用的代码：

＆＃13;

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

＆＃13;

<div class="header-image">
  <a href="http://www.danielbloemendal.nl/" rel="home">
    <img src="http://www.danielbloemendal.nl/wp-content/uploads/2017/10/cropped-IMG_20171002_114642.jpg" srcset="https://i2.wp.com/www.danielbloemendal.nl/wp-content/uploads/2017/10/cropped-IMG_20171002_114642.jpg?w=1200 1200w, https://i2.wp.com/www.danielbloemendal.nl/wp-content/uploads/2017/10/cropped-IMG_20171002_114642.jpg?resize=300%2C70 300w, https://i2.wp.com/www.danielbloemendal.nl/wp-content/uploads/2017/10/cropped-IMG_20171002_114642.jpg?resize=768%2C179 768w, https://i2.wp.com/www.danielbloemendal.nl/wp-content/uploads/2017/10/cropped-IMG_20171002_114642.jpg?resize=1024%2C239 1024w"
      sizes="(max-width: 709px) 85vw, (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px" width="1200" height="280" alt="Staman Steel">
  </a>
</div>

＆＃13;

Answer 1

如果查看IMG标签，您将看到已定义宽度，可能是为了使其适合屏幕。如果将此值设置为100％，则会拉伸。请记住，这会降低图像质量，您可能需要深入了解img标记以寻找解决方案。

编辑：只是一个FYI，你真的想避免使用内联样式，不仅是因为如果你只是按原样查看文本就会发现像这样的东西。

Answer 2

未能看到您正在使用的CSS我会说图像具有固定宽度，并且您的笔记本电脑宽度视口可能大于此分辨率宽度。您必须使用CSS将图像设置为100％才能实现此目的。

Answer 3

.header-image img{width:100%; height:auto;}

<div class="header-image">
    <a href="http://www.danielbloemendal.nl/" rel="home">
        <img src="http://www.danielbloemendal.nl/wp-content/uploads/2017/10/cropped-IMG_20171002_114642.jpg" srcset="https://i2.wp.com/www.danielbloemendal.nl/wp-content/uploads/2017/10/cropped-IMG_20171002_114642.jpg?w=1200 1200w, https://i2.wp.com/www.danielbloemendal.nl/wp-content/uploads/2017/10/cropped-IMG_20171002_114642.jpg?resize=300%2C70 300w, https://i2.wp.com/www.danielbloemendal.nl/wp-content/uploads/2017/10/cropped-IMG_20171002_114642.jpg?resize=768%2C179 768w, https://i2.wp.com/www.danielbloemendal.nl/wp-content/uploads/2017/10/cropped-IMG_20171002_114642.jpg?resize=1024%2C239 1024w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px" width="1200" height="280" alt="Staman Steel">
    </a>
</div>

Answer 4

试试这个：桌面。

＆＃13;

img {
  height: 100vh;
  max-width: 100%;
  vertical-align: middle;
}

＆＃13;

<div class="header-image">
  <a href="http://www.danielbloemendal.nl/" rel="home">
    <img src="http://www.danielbloemendal.nl/wp-content/uploads/2017/10/cropped-IMG_20171002_114642.jpg" srcset="https://i2.wp.com/www.danielbloemendal.nl/wp-content/uploads/2017/10/cropped-IMG_20171002_114642.jpg?w=1200 1200w, https://i2.wp.com/www.danielbloemendal.nl/wp-content/uploads/2017/10/cropped-IMG_20171002_114642.jpg?resize=300%2C70 300w, https://i2.wp.com/www.danielbloemendal.nl/wp-content/uploads/2017/10/cropped-IMG_20171002_114642.jpg?resize=768%2C179 768w, https://i2.wp.com/www.danielbloemendal.nl/wp-content/uploads/2017/10/cropped-IMG_20171002_114642.jpg?resize=1024%2C239 1024w"
      sizes="(max-width: 709px) 85vw, (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px" width="1200" height="280" alt="Staman Steel">
  </a>
</div>

＆＃13;

标题图像没有全宽

4 个答案: