imgタグのイメージをbackground-imageのcoverのように扱う
こんなパターンなかなか無いんだけどね。
例えば1300pxのデザインだったら、
windiowの幅1300px以下は、
1300pxのデザイン100%の大きさそのままで、
常にwindowに表示される部分がデザインのセンターになるように。
(左右、はみ出し分は、マスクされるような)
んで
コンテンツ幅(1300px)を超えたら
左右の余白は無しで
イメージをwindow幅に合わせて拡大したいっとき。
すごく凝ったデザインで
Positionガシガシ使ったレイアウトの時、
Window幅100%の画像を配置する場合
css backgroudで指定するより
Imgタグで並べた方が楽やねん。
こうする
<section class="overflw_H"> <img class="imageMax key_win_mgLeft" src="images/top_back.jpg" alt=""> <div class="topBtnScroll"> <a href=""><img src="images/xxxxx.png" alt=“positionでセンターに配置したいもの”></a> </div> <img src="images/top_contact.png" alt="contact"> </section>
jqueryの命令
var containerMaxW = 1300
$(window).on('load resize',function(){
var winW = $(window).width();
var bodyMgL = (winW - containerMaxW)*0.5
if (winW <= containerMaxW) {
$(function() {
$('.key_win_mgLeft').css('margin-left', bodyMgL);
});
} else{
$(function() {
$('.key_win_mgLeft').css('margin-left', 'auto');
});
}
});// load resize
要は、imgタグにだけ左にネガティブマージンを指定する。
Css
.topBtnScroll{ //potionでセンターに配置したい
width: 138px;
margin-left: auto;
margin-right: auto;
}
.topBtnScroll a{ //potionでセンターに配置したい
position: absolute;
bottom: 85px;
}
.overflw_H{ //overflow: hidden;で左右ハミ出たimageは隠される。横スクロールしない
overflow: hidden;
}
.imageMax{
width: 100%;
min-width: 1300px; //ここで指定しとく
}