Css 缩放图像上的相对值 首先，请考虑这个问题。

我需要在特定的图像区域上获得一些链接，但是这些图像会根据父级大小进行缩放。。。 这就是为什么链接的位置和大小与图像相对（百分比）。 但小提琴显示了这种方法的问题

有没有办法让

.image wrapper

在缩放后“模拟”img的大小和位置？！有什么把戏吗

注意：我同意只使用webkit解决方案

编辑1 实际上，我更关注的是使图像适合content div，然后使图像包装器遵循生成的图像大小。

---

现在，我正试图让它集中处理图像。

一种可能的方法是使用Jquery处理图像比率，并根据图像尺寸调整链接比率和边距

看一下这个提琴示例：

Js测量图像的宽度和高度，并根据其比率，作用于链接的宽度或高度

var width = $('#content2 img').width();
var height =  $('#content2 img').height();
//vertical image
if(height > width){
   var left = $('#content2 img').css('margin-left');
    $('#content2 .sample-link').css({'width':  width, 'left' : left});
 }
else{
  var top = $('#content2 img').css('margin-top');
   $('#content2 .sample-link').css({'height':  height*0.2, 'top' : top + height*0.4});

 }

然后，您可以将所有指令封装在一个简单的函数中

我知道把所有可能的案例都放在一起可能会很棘手，但我遇到了一个类似的问题，就这样解决了

---

希望能有所帮助

以下是解决方案的CSS框架

假设您的HTML如下所示：

<div id="content1" class="content portrait">
    <div class="panel-wrapper">
        <div class="image-wrapper">
            <img src="http://placekitten.com/200/250" />
            <a href="#" class="sample-link"></a>
        </div>
    </div>
</div>
<div id="content2" class="content landscape">
    <div class="panel-wrapper">
        <div class="image-wrapper">
            <img src="http://placekitten.com/300/200" />
            <a href="#" class="sample-link"></a>
        </div>
    </div>
</div>

我将

display:table

应用于

。content

和

display:table cell

应用于

。面板包装器

，这样我就可以得到一个垂直和水平居中的图像

.image包装器

具有

显示：内联块

为了正确缩放，需要根据图像的纵横比考虑两种情况。

对于纵向图像，将

高度：100%

应用于

.image包装器

和子

img

对于横向图像，分别应用

宽度：100%

如果在

.image wrapper

上有边框，请使用CSS

calc（）

函数调整边框的2倍宽度

您需要做的是使用JavaScript/jQuery来确定图像的纵横比，然后将正确的类（

.ratio

或

.scape

）应用于

.content

块

---

请参见演示：

图像的纵横比是否始终是纵向的（高度大于宽度）？@MarcAudet遗憾的是，不是……不久前我解决了一个相关问题，CSS解决方案取决于图像的纵横比。为了解决纵向/横向问题，我使用jQuery/JavaScript确定图像的纵横比，然后应用正确的CSS样式。这样的解决方案行吗？谢谢！通过使用

display:inline block

技巧（非常简洁的btw），我可以得到一个仅css的解决方案吗？这里的问题是css无法确定图像的纵横比（或任何其他替换的内容元素），以便将宽度或高度设置为100%。您需要一些JavaScript帮助，除非您可以在服务器端确定纵横比，然后使用正确的类值（纵向或横向）将HTML送达服务器。对于这种类型的问题，没有CSS唯一的解决方案，对不起！我认为您编辑的问题仍然会导致相同的问题和解决方案。您有一个指定尺寸的块级容器，并且希望子图像缩放到纵向的高度或横向的宽度。编辑的问题简化了HTML标记，但没有解决中心问题，也就是说，您仍然需要让CSS知道图像的纵横比。