如何以正确的方式设计（并响应！）？

Question

我的Wordpress网站上有一个column，其中包含我们的国家/地区图片和一些文字。

这是它应该在普通浏览器和手机上查看的方式：

现在，默认情况下 Wordpress 并没有很好地解析这个问题。如果我只在我的列中插入文本和图像，它看起来像这样：

如您所见，该列未达到所需的高度。我的解决方案是添加一个固定高度为225px的div。 然后看起来不错！但是，响应不是。

当我调整窗口大小时，它看起来像这样：

图像未调整大小。文本到处都是，并且列的高度太高了。

我已尝试this trick使图像响应，但这并不起作用。

如何以正确的方式设计，以便在正常大小的屏幕和移动设备上看起来很棒？

<div class="fusion-one-half one_half fusion-layout-column fusion-column last spacing-yes"><div class="fusion-column-wrapper" style="background-color:#ffffff;padding:10px;">
<h2>VIND DE BEWINDVOERDER IN UW REGIO</h2>
<p>Lorem Ipsum dolor sit amet.<br>
consetetuer adipiscing elit.<br>
<img class="alignright size-full wp-image-78" src="http://zekerfz.icode4u.nl/wp-content/uploads/2015/02/ZEKERFZ_website_home_home_2_09.png" alt="landkaart" width="292" height="350">&nbsp;Aenean commodo ligula<br>
eget dolor. Aenean massa.<br>
Cum soccis natoque<br>
penatibus et agnis dis<br>
parturient montes, nasectur<br>
ridiculus mus.</p>
<div id="landkaart"></div>
</div></div>

#landkaart {
height: 200px;
}
#landkaart img {
max-width:100%;
}

有关我的Wordpress列的复制，请参阅jsFiddle：http://jsfiddle.net/7056ewyr/