缩小图像同时限制比例？ [英] Downsizing image while constraining proportions?

问题描述

我有这个codepen ，我试图缩小图片，具体取决于周围的宽度。问题是它缩小而没有约束比例。

HTML

 内嵌宽度和高度来自wordpress幸运的是成功地被类定义覆盖。 
< br /> 
< img src =http://artfiles.alphacoders.com/613/61309.jpgwidth =4443height =5555class =someclass/> 
  

CSS

  .someclass {
 width：50％; 
 height：50％; 
 position：absolute; 
 
} 
 
 
 
 body {
 background-color：cyan; 
} 
  

在CSS中有一个整洁的方法，如果没有，

解决方案

为了保持比例，你必须考虑你的百分比是多少。它是50％的最接近相对定位的父...在这种情况下，窗口，因为没有...（这是为什么你的绝对黑客似乎工作）选择宽度或高度，并留下其他汽车。 - 根据你对它的父母的理解。

这是一个在线的媒体上传吗？如果是，您可以按以下方式定位：

这里是以下的jsFiddle）

HTML

 < div class =main-content> 
 
<？php the_content（）; > 
 
< / div> 
  

CSS

  .main-content img {
 display：block; 
 width：100％; 
 height：auto; 
 max-width：50％; 
} 
 
 img.special-class {/ *或者像你一样，有一个类 - 和上面的CSS * / 
 property：value; 
} 
  

，您可以使用：nth类型替换浮动和内容。 p>

如果您正在使用缩图...（精选图片）

由于视网膜的目的（通常有更多的控制）和样式的容器的大小和设置你的img像这样：

HTML

 < div class =image-w> 
<？php the_post_thumbnail（$ size，$ attr）; > 
< / div> 
  

CSS

  .image-w {
 width：100％; 
 max-width：your-size; 
} 
 
 .image-w img {
 display：block; 
 width：100％; 
 height：auto; 
} / *这将设置.image-w中的所有img来响应他们的父* / 
  

I have this codepen where I try to downsize an image, depending on the surrounding width. The problem is that it downsizes without constraining proportions.

HTML

the inline width and height come from wordpress and can luckily be successfully get overwritten by the class definition.
<br/>
<img src="http://artfiles.alphacoders.com/613/61309.jpg" width="4443" height="5555" class="someclass"/>

CSS

.someclass{
  width: 50%;
  height: 50%;
  position: absolute;

}



body {
    background-color: cyan;
}

Is there a neat way to do this in CSS, and if not, what is the cleanest way to do it with jquery?

解决方案

To keep proportions you have to think what your percentage is "of." It's 50% of it's closest relatively positioned parent... in this case, the window since there is none... (which is why your absolute hack seems to work) Choose either width or height and leave the other auto. - base it on your understanding of it's parent. Take a gander at absolute vs relative and how they work together.

Is this an in-post media upload? if so, you can target it like this:

(here is a jsFiddle of the following)

HTML

<div class="main-content">

  <?php the_content(); ?>

</div>

CSS

.main-content img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 50%;
}

img.special-class { /* or like you have it, with a class - and the CSS above */
    property: value;
}

and you can use :nth of type to alternate floats and stuff.

If you are using a thumbnail... (featured image) or whatever...

Than I would use wrapper around the image for retina purposes (and generally have more control) and style the container's size and set your img like this:

HTML

<div class="image-w">
  <?php the_post_thumbnail( $size, $attr ); ?>
</div>

CSS

.image-w {
    width: 100%;
    max-width: your-size;
}

.image-w img {
  display: block;
  width: 100%;
  height: auto;
} /* this will set all img in .image-w's to respond to their parent */

这篇关于缩小图像同时限制比例？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！