2

まず、このfiddleを検討してください。

特定の画像領域にいくつかのリンクを取得する必要がありますが、これらの画像は親のサイズに応じてスケーリングされます...そのため、リンクの位置とサイズは画像に対して相対的 (パーセンテージ) です。しかし、フィドルはこのアプローチの問題を示しています。

とにかく、スケーリング後にサイズと位置.image-wrapperを「模倣」する方法はありますか?! img何かトリックか何か？

注: Webkit のみのソリューションで問題ありません。

編集 1

実際には、画像をコンテンツ div に合わせてから、結果の画像サイズに合わせて画像ラッパーを作成することに重点を置いています。これが私がこれまでに達成したことです... 今、私は画像を一元化して機能させようとしています。

4

2 に答える 2

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

 }

次に、明らかに単純な関数ですべての命令をラップできます。

考えられるすべてのケースを配置するのは難しいことはわかっていますが、同様の問題があり、この方法で解決しました。

それが役に立てば幸い

于 2013-10-28T11:08:36.893 に答える
1

これは、ソリューションの 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: tableto.contentとdisplay: table-celltoを適用して.panel-wrapper、垂直方向と水平方向の両方で画像を中央に配置できるようにします。

.image-wrapperを持っていますdisplay: inline-block。

適切なスケーリングを行うには、画像の縦横比に応じて 2 つのケースを考慮する必要があります。

縦長の画像の場合は、と childに適用height: 100%します。.image-wrapperimg

横長の画像の場合は、width: 100%それぞれ適用してください。

に境界線がある場合は.image-wrapper、CSScalc()関数を使用して境界線の幅を 2 ​​ピクセルに調整します。

必要なことは、JavaScript/jQuery を使用して画像の縦横比を決定し、正しいクラス (.portraitまたは.landscape) を.contentブロックに適用することです。

デモを参照してください: http://jsfiddle.net/audetwebdesign/SZjvJ/

于 2013-10-28T11:44:33.060 に答える