私は私自身の解決策を考え出したと私は場合には、ここでそれを共有するだろうと思いました糸。 background-size:coverソリューションは最も簡単ですが、私はIE7でもうまくいくものが必要でした。ここで私はjQueryとCSSを使って思いついたのです。
注:私の画像は「プロファイル」画像であり、正方形に切り取る必要がありました。したがって、いくつかの関数名。
のjQuery:
cropProfileImage = function(pic){
var h = $(pic).height(),
w = $(pic).width();
if($(pic).parent('.profile-image-wrap').length === 0){
// wrap the image in a "cropping" div
$(pic).wrap('<div class="profile-image-wrap"></div>');
}
if(h > w){
// pic is portrait
$(pic).addClass('portrait');
var m = -(((h/w) * 100)-100)/2; //math the negative margin
$(pic).css('margin-top', m + '%');
}else if(w > h){
// pic is landscape
$(pic).addClass('landscape');
var m = -(((w/h) * 100)-100)/2; //math the negative margin
$(pic).css('margin-left', m + '%');
}else {
// pic is square
$(pic).addClass('square');
}
}
// Call the function for the images you want to crop
cropProfileImage('img.profile-image');
CSS
.profile-image { visibility: hidden; } /* prevent a flash of giant image before the image is wrapped by jQuery */
.profile-image-wrap {
/* whatever the dimensions you want the "cropped" image to be */
height: 8em;
width: 8em;
overflow: hidden;
}
.profile-image-wrap img.square {
visibility: visible;
width: 100%;
}
.profile-image-wrap img.portrait {
visibility: visible;
width: 100%;
height: auto;
}
.profile-image-wrap img.landscape {
visibility: visible;
height: 100%;
width: auto;
}
あなたはあなたの問題を説明しましたが、非常にいくつかのコードを見ることができるように認識されます。あなたの質問がはるかに高い値を持つようにいくつかのコードを追加することを検討してください。 –
@CodyGuldner、ここでのポイントは、彼は彼が彼が使用するコードを知らないということです。彼の質問は私にとってはうまくいくようだ。 – Jonah
@CodyGuldnerもし私がいくつかのコードを持っていたら、私は実際にここにそれを見せてくれるでしょう。しかし、私はこの時点では何も持っていません。 – adit