使用CSS按比例调整图像大小？

18 回答

• 48

  尝试

  transform: scale(0.5, 0.5);
  -ms-transform: scale(0.5, 0.5);
  -webkit-transform: scale(0.5, 0.5);
  

  回复于 2024-04-28T23:45:46+08:00
• 21

  <img style="width: 50%;" src="..." />
  

  对我来说工作得很好......或者我错过了什么？

  Edit: 但是看到肖恩关于不小心升迁的警告 .

  回复于 2024-04-28T23:45:46+08:00
• 40

  控制尺寸和保持比例：

  #your-img {
      height: auto; 
      width: auto; 
      max-width: 300px; 
      max-height: 300px;
  }
  

  回复于 2024-04-28T23:45:46+08:00
• 704

  如果是背景图像，请使用background-size：contains .

  示例css：

  #your-div {
    background: url('image.jpg') no-repeat;
    background-size:contain;
  }
  

  回复于 2024-04-28T23:45:46+08:00
• 201

  请注意， width:50% 会将其大小调整为 50% of the available space （图像），而 max-width:50% 会将图像大小调整为 50% of its natural size . 在将此规则用于移动网页设计时，这一点非常重要，因此对于移动网页设计，应始终使用 max-width .

  回复于 2024-04-28T23:45:46+08:00
• 8

  您可以使用 object-fit 属性：

  .my-image {
      width: 100px;
      height: 100px;
      object-fit: contain;
  }
  

  这将适合图像，而不是按比例改变 .

  回复于 2024-04-28T23:45:46+08:00
• 4

  我们可以使用媒体查询和响应式设计原理在浏览器中使用CSS调整图像大小 .

  @media screen and (orientation: portrait) {
  img.ri {
      max-width: 80%;
    }
  }
  

  @media screen and (orientation: landscape) {
    img.ri { max-height: 80%; }
  }
  

  回复于 2024-04-28T23:45:46+08:00
• 2

  试试这个：

  div.container {
      max-width: 200px;//real picture size
      max-height: 100px;
  }
  
  /* resize images */
  div.container img {
      width: 100%;
      height: auto;
  }
  

  回复于 2024-04-28T23:45:46+08:00
• 23

  要使用CSS按比例调整图像大小：

  img.resize {
      width:540px; /* you can use % */
      height: auto;
  }
  

  回复于 2024-04-28T23:45:46+08:00
• 2

  2015年重访：

  <img src="http://imageurl" style="width: auto; height: auto;max-width: 120px;max-height: 100px">
  

  我已经重新审视了它，因为所有常见的浏览器现在都有Cherif上面提到的自动工作，因此你可以更好地工作，因为你不需要知道图像是否比更高更宽 .

  旧版本：如果您受限于120x100的盒子，例如你可以做到

  <img src="http://image.url" height="100" style="max-width: 120px">
  

  回复于 2024-04-28T23:45:46+08:00
• 13

  img{
      max-width:100%;
      object-fit: scale-down;
  }
  

  适合我 . 它缩小较大的图像以适合框，但将较小的图像留下原始大小 .

  回复于 2024-04-28T23:45:46+08:00
• 30

  img {
      max-width:100%;
  }
  
  div {
      width:100px;
  }
  

  使用此代码段，您可以更有效地执行此操作

  回复于 2024-04-28T23:45:46+08:00
• 36

  通过保持纵横比来缩放图像

  试试这个，

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

  回复于 2024-04-28T23:45:46+08:00
• 100

  使用这种简单的缩放技术

  img {
      max-width: 100%;
      height: auto;
  }
  @media {
    img { 
      width: auto; /* for ie 8 */
    }
  }
  

  回复于 2024-04-28T23:45:46+08:00
• 2

  我相信这是最简单的方法，也可以通过 <img> 标签内的内联 style 属性使用 .

  .scaled
  {
    transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
  }
  
  <img src="flower.png" class="scaled">
  

  要么

  <img src="flower.png" style="transform: scale(0.7);">
  

  回复于 2024-04-28T23:45:46+08:00
• 69

  image_tag("/icons/icon.gif", height: '32', width: '32') 我需要设置高度：'50px'，宽度：'50px'到图片标记，这段代码从第一次尝试开始工作我尝试了以上所有代码，但没有运气，所以这个工作，这是我的代码，来自我的_nav.html.erb：
  <%= image_tag("#{current_user.image}", height: '50px', width: '50px') %>

  回复于 2024-04-28T23:45:46+08:00
• 3

  css属性max-width和max-height工作 great ，但不是't supported by IE6 and I believe IE7. You would want to use this over height / width so you don' t意外缩放图像 . 您只想按比例限制最大高度/宽度 .

  回复于 2024-04-28T23:45:46+08:00
• 1

  你总是需要这样的东西

  html
  {
      width: 100%;
      height: 100%;
  }
  

  在您的CSS文件的顶部

  回复于 2024-04-28T23:45:46+08:00