Question

首先，请考虑这个fiddle。

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

有没有让.image-wrapper“模仿”img缩放后的{{1}}尺寸和位置？！任何技巧或其他什么？

注意：我可以使用仅限webkit的解决方案！

编辑1

实际上我更专注于使图像适合内容div，然后使图像包装器遵循最终的图像大小。 Here's what I achieved so far... 现在我正试图让图像集中处理。

Answer 1

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

看看这个示例小提琴：http://jsfiddle.net/t7Ucj/

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});

 }

然后你可以明显地将所有指令包装在一个简单的函数中。

我知道把所有可能的情况放在一边可能很棘手，但我遇到了类似的问题并以这种方式解决了。

希望有所帮助

Answer 2

以下是解决方案的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>

HTML与原始代码类似，只是有一个额外的包装器.panel-wrapper。

我使用了以下CSS：

.content {
    background: lightgray;
    display: table;
    margin: 40px 0;
}
#content1 {
    width:100px;
    height:150px;
}
#content2 {
    width:150px;
    height:150px;
}
.panel-wrapper {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.image-wrapper {
    outline: 1px solid green;
    position:relative;
    display: inline-block;
}
.content img {
    display: block;
    width: 100%;
}
.portrait .image-wrapper {
    height: calc(100% - 2px);
}
.portrait .img {
    height: 100%;
}
.landscape .image-wrapper {
    width: calc(100% - 2px);
}
.landscape .img {
    width: 100%;
}
.sample-link {
    background:rgba(0, 0, 255, 0.3);
    position:absolute;
    display:block;
    width: 50%;
    height:20%;
    top:5%;
    left:5%;
}

我将display: table应用于.content，将display: table-cell应用于.panel-wrapper，以便我可以将图像垂直和水平居中。

.image-wrapper有display: inline-block。

要获得正确的缩放比例，您需要根据图像的纵横比考虑两种情况。

对于肖像图片，请将height: 100%应用于.image-wrapper和孩子img。

对于风景图像，分别应用width: 100%。

如果.image-wrapper上有边框，请使用CSS calc()功能调整边框的2px宽度。

您需要做的是使用JavaScript / jQuery来确定图像的宽高比，然后将正确的类（.portrait或.landscape）应用于.content块。< / p>

请参阅演示：http://jsfiddle.net/audetwebdesign/SZjvJ/

缩放图像上的相对值

编辑1

2 个答案: