Question

我花了几个小时做以下事情但没有工作。

1.当您调整窗口大小时，div框内的小图标（volklensset_90x90.jpg）也应随容器一起移动。目前，如果您调整浏览器大小，它将停留在主div之外。似乎图标是以某种方式修复的。

2.虽然volklensset_90x90.jpg为max-width，但小图标（100%）未调整大小。

3.我想在调整浏览器大小时调整文本大小。为此，我使用了来自http://fittextjs.com/的jquery插件，但对我不起作用。

<div class="container">
    <div class="home_box">
        <img width="376" height="380" 
             src="http://www.ukflooringdirect.co.uk/public/images/products/Br%20Ash%203%20strip%20Laq%20DET.jpg">
        <img width="90" height="90" 
             src="http://www.keeler.co.uk/images/products/thumbs/volklensset_90x90.jpg" 
             alt="icon_newwork" class="icon">
        <h4>hot off the server</h4>
    </div>
</div>

演示：http://jsfiddle.net/EP4mj/

重要的是我无法将主要大图像保留为div home_box的背景图像。

有什么办法吗？请建议。

Answer 1

只回答第一个问题。

当您调整窗口大小时，div框内的小图标（volklensset_90x90.jpg）也应随容器一起移动。目前，如果您调整浏览器大小，它将停留在主div之外。似乎图标是以某种方式修复的。

您的图标相对于.container定位。因此，当您调整窗口大小时，.container会变宽，图标会向左移动。您可以通过向.home_box添加position: relative来相对于.home_box定位图标。您可以通过width: 400px; margin: 0 auto之类的内容使{{1}}居中。

调整文本和图像的大小和位置在另一个图像中

1 个答案: