css 图片高度怎么设置才不会变形,被压缩

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 图片高度怎么设置才不会变形,被压缩相关的知识,希望对你有一定的参考价值。

下面是css属性,怎么设置图片才会正常显示

设置图片自适应,给图片设置display:block;width:100%;不要设置高度,不要设置高度,不要设置高度。这样图片就能根据父级div适应大小,就是你设置一个div,里面放图片。div多大,图片就多大。高度自动适应,所以不能设置高度。 参考技术A PS软件可以调整,随便拖移形状

如何利用JS或者CSS样式来自动调整图片大小

RT,图片是用HTML编辑器上传到数据库的,提取出的时候,直接将<img src="图片">这个代码提取出来,这种情况怎么控制图片的大小,使图片不会超过表格大小,缩放时也不能变形。

js版和css版自动按比例调整图片大小方法,分别如下:

<title>javascript图片大小处理函数</title>
<script language=Javascript>
var proMaxHeight = 150;
var proMaxWidth = 110;
function proDownImage(ImgD)
      var image=new Image();
      image.src=ImgD.src;
      if(image.width>0 && image.height>0)
      var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height;
    if(rate <= 1)   
     ImgD.width = image.width*rate;
     ImgD.height =image.height*rate;
    
    else 
                          ImgD.width = image.width;
                          ImgD.height =image.height;
                  
      

</script>
</head>
<body>
<img src="999.jpg" border=0    onload=proDownImage(this);   />
<img src="room.jpg" border=0   onload=proDownImage(this);   />
</body>

纯css的防止图片撑破页面的代码,图片会自动按比例缩小:

<style type="text/css">
.content-width MARGIN: auto;WIDTH: 600px;
.content-width imgMAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 600 ? "600px" : this.width)!important;
</style>


<div class="content-width">
  <p><img src="/down/js/images/12567247980.jpg"/></p>
  <p><img src="/down/js/images/12567247981.jpg"/></p>
</div>
参考技术A 这个使用CSS可以控制,一般看你的图片是哪种比例的,如果不想图片变形的话,只设置宽或者高,如:
img width:50px; 或者 imgheight:50px;
这样的结果是,图片本身的大小并没有改变,但这个img标签显示出来的图片是被压缩显示的。
利用JS来调整的原理是:获得图片的宽和高,然后去与父容器的宽高相比,取比例大的来父容器值对img进行样式设置,比如:图片宽/父容器宽 = 3, 图片高/父容器高 = 2,那么取父容器的宽,把这个值通过JS设置给img标签。本回答被提问者采纳
参考技术B 2楼的能够解决CSS控制图片尺寸的问题,但是还不够灵活,我在他的基础上补充一下,
可以这样,如果你的图片的最大宽度不能超过600

只要在CSS里面加句就可以

#content imgmax-width:600px;

以上是关于css 图片高度怎么设置才不会变形,被压缩的主要内容,如果未能解决你的问题,请参考以下文章

CSS编码练习时,设置了层和图片的宽与高,但是显示时高度被自动压缩了一半,是怎么回事呢?

怎么在AI里拉伸图片图片的尺寸而图片不会变形。

css怎么让图片自适应

CSS3如何固定图片宽度使图片高度按图片比例自适应?

如何使div中的图片自适应宽度和高度,图片不变形,可以超出div,超出部分隐藏

如何设置页面宽度自适应