Question

我有一个包含侧边栏的网站，有时还有一个非常大的图像（大约800像素宽）但是我编写了代码，这样如果屏幕分辨率太小，图像会缩小并缩小到小完全根据多个浏览器我测试了网站的空间。我通过powermapper在以下网站上使用demosite的demo网站测试了该网站：

http://try.powermapper.com/Demo/

然后继续抱怨＆＃34;省略IMG WIDTH或HEIGHT属性意味着页面文本在图像加载时跳转。 Usability.gov 14：3＆＃34;

据我所知，我试图包含这些属性，图像无法正确缩放。

如果我的显示器最大屏幕宽度为800像素，这是我在图像上使用的CSS来缩放它：

@media screen and (max-width: 600px){#X IMG{width: 100%}}

我指定600px，因为我为侧边栏保留了200个像素。

我不认为javascript会是一个答案，因为在页面加载过程中，图像占位符会跳转到新的大小，如果我将代码放在开头附近，它会延迟页面的其余部分来自加载。

我还在考虑使用div标签并将背景设置为图像，但问题是用户无法保存它，而我网站上的其他图像都是CSS精灵的一部分片材。

即使禁用了javascript，我也在寻找能够与尽可能多的网络浏览器一起使用的解决方案。

有任何答案的想法吗？

Answer 1

这条规则虽然正确，但在响应式设计出现时已经消失了：

省略IMG WIDTH或HEIGHT属性意味着页面文本跳转随着图像加载。 Usability.gov 14：3

如果您总是使用给定的宽高比，那么您可以按如下方式设置代码。如果您在width标记上设置height和img属性，并在CSS中设置max-width: 100%（或类似），就像人们在开发自适应网站时经常做的那样，那么当图像加载时，你的文本仍然会跳转，因为它的初始高度将是你在标记中指定的高度，然后当图像加载时，浏览器将保持max-width: 100%工作和结束所需的宽高比缩小高度 - 所以这并不能真正帮助你遵守你的可用性规则。

.img { 
    background-size: cover; 
    background: center no-repeat;
  }

.ar {
  height:0;
  padding: 0 0 56.25% /* 16:9 aspect ratio */
}

<div class="img" style="background-image: url(https://placekitten.com/g/500/500);">
  <div class="ar"></div>
  </div>

Answer 2

尝试设置宽度和高度，然后使用媒体查询调整宽度和高度（而不是最大宽度和百分比宽度）。那时你不应该遇到任何缩放问题。

Answer 3

@media screen and (max-width: 600px){#X IMG{width: 100%}}

这意味着IMG将拥有它的第一个父级的全宽。那个父母可能不是X元素。你确定要的吗？
例如：

<div id='X'>
    <div><div><div><div>
         <img src=''>
    </div></div></div></div>
</div>

如果您尝试修复height:auto; width:100%;之后放置width的x：y img比率计算height或auto并始终使用{{1}}作为其他属性以保留图像缩放。

我是否坚持强制图像标签的固定图像尺寸？

3 个答案: