如何创建比例图像高度/宽度 [英] how to create proportional image height/width

问题描述

所以，我想要一个图像调整到其原始高度/宽度的30％。假设你不知道它的高度或宽度，你将如何使用CSS / HTML？

解决方案

Update：

使用 display：inline-block;

 <$ c $ 
 c>< div class =holder> 
< img src =your-image.jpg/> 
< / div> 
  

CSS

  .holder {
 width：auto; 
 display：inline-block; 
} 
 
 .holder img {
 width：30％; / *将图像缩小到其原始宽度的30％* / 
 height：auto; 
} 
  

包装器折叠到图像的原始宽度， code> width：30％图像上的CSS规则会导致图像缩小到其父宽度（即其原始宽度）的30％。

以下是演示。

---

很遗憾，没有纯HTML / CSS方法可以执行这样的计算。 / strike>然而，使用一个jQuery片断很简单：

  $（'img.toResizeClass'）。 （）{
 
 var $ img = $（this），
 imgWidth = $ img.width（），
 imgHeight = $ img.height（）; 
 
 if（imgWidth> imgHeight）{
 $ img.width（imgWidth * 0.3）; 
} else {
 $ img.height（imgHeight * 0.3）; 
} 
}）; 
  

So, I want to have an image resized to 30% of its original height/width. Pretend you don't know its height or width, how would you go about it using only CSS/HTML?

解决方案

Update:

Using a display: inline-block; wrapper, it's possible to make this happen with CSS only.

HTML

<div class="holder">
    <img src="your-image.jpg" />
</div>

CSS

.holder {   
  width: auto;
  display: inline-block;    
}

.holder img {
  width: 30%; /* Will shrink image to 30% of its original width */
  height: auto;    
}​

The wrapper collapses to the original width of the image, and then the width: 30% CSS rule on the images causes the image to shrink down to 30% of its parent's width (which was its original width).

Here's a demo in action.

---

Sadly no pure HTML/CSS way to do it as neither is geared to perform calculations like that. However, it's pretty simple with a snippet of jQuery:

$('img.toResizeClass').each(function(){

    var $img = $(this),
        imgWidth = $img.width(),
        imgHeight = $img.height();

    if(imgWidth > imgHeight){
        $img.width(imgWidth * 0.3);
    } else {
        $img.height(imgHeight * 0.3);
    }
});

这篇关于如何创建比例图像高度/宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！