人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSとjQueryで画像を途中でトリミングしてリサイズ

教えていただきたいです。
画像を画面幅600pxまでは、width100%のまま。
600px以下になった場合は画像の左右を5%トリミングして中央揃えにリサイズandレスポンシブ対応。

という処理を作りたいのですが、おかしな書き方があるかと思うのですが、思うような結果になりません。

過不足な箇所がございましたら(そもそも違ってたら)、コードの書き方を教えていただけると嬉しいです。
よろしくお願い致します。
※作業中のコードなので、若干中途半端な感じです。すいません

<div class="imgbox">
<img src="koma.jpg" alt="koma" class="koma">
</div>

.imgbox{
margin: 0 auto;
position: relative;
}
.imgbox .koma{
position: absolute;
margin: 0 auto;
width: 100%;
}

$(window).on("resize",function(){
var komaW = $(".imgbox").width();
var maxW = 600;

if(komaW < maxW){
$(".koma").css({left: "-10%"});
}else{
$(".koma").css({left: "0"});
}
})


●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :キャンセル
└ 回答数 : 0/0件

回答がありません
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ