用CSS让图片的高度根据宽度调整

Posted 2023-05-06

div overflow:hidden; width:400px; height:？？？？？;>

比如两张图片原来大小是800*200，800*300
设定宽度为400时，怎么让两张图片的宽度分别自动改为100和150？
用CSS，不想用脚本

只能让图片看起来像是100和150

指定div的宽度，然后用百分比设置图片的宽：

div
  overflow:hidden;width:400px;

div img
  width:50%;

参考技术A 使用<img />元素，通过CSS，仅指定width即可。 参考技术B 如果是一开始就固定400,一楼的方法就可以
如果宽度一开始是800,接着变成400,就要用脚本了 参考技术C .tupian img

MARGIN: auto;

WIDTH: 100px;
height:150px;

如果是要按照百分比的话就是这样
.tupian img

MARGIN: auto;

WIDTH: 95%;

MAX-WIDTH: 100%!important;HEIGHT: auto!important;

width:expression(this.width > 95% ? "600px" : this.width)!important;
本回答被提问者和网友采纳

用CSS如何让节点宽度自动填满

宽度根据父级来定的：百分比——100% --> width：100%；（此时宽度填满为父级的宽度）。要注意，如果不是填满你希望的宽度，那就是父级的宽度需要你调整了；

display：block；块元素自动占满一行宽

参考技术A 百分比布局可以吗 100%