将<img/>向下推50％的高度仍会影响流量

Question

假设我有这个示例代码

<div>
    <img src="http://www.lorempixel/100/200" />
    <p>
        Bla bla bla bla
    </p>
</div>

我想将img推高50％的高度，同时推动<p>。 但是如何？

• 保证金和填充百分比是指父母的width
• Top只能用于不推送其他元素的位置
• 翻译不会影响布局

我的想法是找到一种方法来存储属性中图像的比例，并将图像按比例推动50％除以（因此它使用高度），但我没有看到任何使用属性的方法在CSS中（因为attr()不能在content之外使用）。 我想避免添加javascript调整大小事件。

此外，它位于响应式网站上，因此我无法对边距值进行硬编码。

我错过了一些非常明显的东西吗？

由于

Answer 1

如果你在这里找不到其他解决方案，那就是JQuery https://jsfiddle.net/d4ggj5q9/ HTML

<div class="somediv">
  <img class="image" src="http://placehold.it/350x150">
  <p>
      Bla bla bla bla
  </p>
</div>

JS

var imageHeight = $('.image').height() / 2;
$('.somediv').css('margin-top', imageHeight);

修改

更新调整大小

$(window).resize(margin);
$(document).ready(margin);

function margin() {
    var imageHeight = $('.image').height() / 2;
    $('.somediv').css('margin-top', imageHeight);
}

Answer 2

$('img').each(function () {
    var ht = $(this).height();
    ht = ht / 2 + 'px';

    $(this).css('margin-top', ht);
});

<强> Fiddle