Question

I have this codepen我尝试缩小图像尺寸，具体取决于周围的宽度。问题是它在不限制比例的情况下缩小尺寸。

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;
}

有没有一种巧妙的方法在CSS中执行此操作，如果没有，使用jquery执行此操作的最简单方法是什么？

Answer 1

您可以删除属性height：

$('.someclass').removeAttr('height');

并在你的css类中删除height属性：

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

demo

Answer 2

为了保持比例，你必须考虑你的百分比是多少。这是它最近的相对定位的父母的50％......在这种情况下，窗口因为没有...（这就是为什么你的绝对黑客似乎工作）选择宽度或高度并留下另一个自动。 - 根据你对它的父母的理解。以绝对与亲戚以及他们如何一起工作为例。

这是一个在线媒体上传吗？如果是这样，你可以这样定位：

(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;
}

你可以使用：nth of type来交替花车和东西。

如果您使用缩略图...（精选图片）或其他......

我会在图像周围使用包装器用于视网膜目的（通常有更多的控制）并设置容器的大小并设置你的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;
} /* this will set all img in .image-w's to respond to their parent */

Answer 3

发生的事情是你将图像元素的宽度和高度设置为包含的50％，而不是原始宽度和高度的50％。这就是为什么它的比例不成比例。如果你想在纯CSS中这样做，你可以尝试这样的事情：

http://codepen.io/anon/pen/Lzaej

用div替换图像，然后将图像本身设置为背景。我使用的css属性可能并不是每个浏览器都支持。

Answer 4

有一个简洁的内联HTML代码，将宽度指定为百分比然后以正确的比例设置高度尝试此...

<img src="http://www.yourwebste/imageurl.jpg" height=65% width= height/width*65%>

此示例有65％（两次），但您可以将其更改为任何

在限制比例的同时缩小图像尺寸？

4 个答案:

demo

HTML

CSS

HTML

CSS