通过css重置图像宽度和高度

2019年8月3日 203次阅读

我正在尝试在html中创建包含图像的流体布局.

目前,我支持2种尺寸的布局.默认布局用于显示1000px宽的站点.如果屏幕足够宽(宽于1200px),我使用css媒体查询增强了许多方面.

我有一个DIV容器,默认布局为600px宽,增强布局为700px.
里面有一个随机图像,我知道一些元数据(宽度和高度).如果图像对于容器而言太大,我可能需要缩小图像尺寸.

所以我使用这个代码来进行流畅的布局

<div class="container">
  <!-- for a 650px/400px image, the downsized version is 600px/369px -->
  <img src="/image?id=1234" width="650" height="400" style="width:600px;height:369px" />
</div>

和风格

@media screen and (min-width:1200px){
  .container IMG {
    width:auto !important;
    height:auto !important;
  }
}

>以下是它的工作原理：

如果是默认布局,则应用内联样式.因此图像尺寸缩小到600px / 369px以适合容器.
否则,应用媒体查询样式,并且图像处于其默认宽度/高度(我知道图像永远不会超过700px,所以一切都很好).

>我的问题来自图像的加载状态和浏览器保留的空间. chrome / firefox的行为是一样的,但对我来说很奇怪.未经IE测试(实际上不是我的优先级)

对于默认布局,没问题,内联样式仍然适用.浏览器显示与图像对应的空白区域.

对于增强的布局,适用“自动”尺寸.但是浏览器在没有完全加载的情况下不知道图像的自然尺寸,并且看起来“auto”相当于0px.如果为应用的图像设置宽度和高度属性,那将是完美的.但事实并非如此.结果是没有为图像保留空间,这不是我想要的行为.

>我发现的第一个解决方案是为图像添加另一个内联css规则.如果我添加“min-width：600px; min-height：369px”,则图像的保留空间始终为600×369像素,而不是增强布局的0像素.那更好,但还不完美.

– 你怎么看 ？

>是否可以“重置”css而不是使用“auto！important”规则覆盖它？
>我应该使用其他方法吗？
>我可能会使用一些javascript,但我认为依靠它是一个坏主意.实际上,我可能有很多类似于上述容器的容器.我更喜欢自动解决方案(css很棒).

最佳答案 我看到的响应式图像的一般方法是让一个父元素(如.container)改变媒体查询的大小.在你的标记中删除width和height属性,然后在CSS中添加：

img {
   width: 100%;
 }

由于您的父元素大小由媒体查询规则决定,因此您的图片会相应增长.

我提出这个问题是因为看起来你想要使用相同的图像文件,但只是让它增长/缩小.主要缺点是较大的图像可能会加载到移动设备屏幕上,并增加页面加载.这是目前响应式设计面临的主要技术障碍,关于解决它的最佳方法存在很大争议.

点赞