Уменьшение изображения при сохранении пропорций?

Чтобы сохранить пропорции, вы должны думать, что ваш процент "из". Это 50% от ближайшего относительно позиционированного родителя... в этом случае окно, так как его нет... (вот почему ваш абсолютный хак, похоже, работает) Выберите ширину или высоту и оставьте другой авто. - основывайте это на своем понимании этого родителя. Возьмите gander в абсолютном и относительном и как они работают вместе.

Является ли это загружаемой в среду медиа-загрузкой? Если это так, вы можете настроить таргетинг следующим образом:

(здесь 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 { /* or like you have it, with a class - and the CSS above */
    property: value;
}

и вы можете использовать: nth типа, чтобы чередовать поплавки и прочее.

Если вы используете миниатюру... (изображение с изображением) или что-то еще...

Чем я буду использовать обертку вокруг изображения для целей сетчатки (и, как правило, иметь больше контроля) и стиль размера контейнера и установить ваш 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 to respond to their parent */