0

いくつかの画像からサムネイルを作成しようとしていますが、それぞれの画像は必ずしも他の画像と同じサイズではありません。

これが私の現在のコードのフィドルです。私は他のいくつかのサイトで読んだことがありますが、ここでも、画像クラスの幅と高さを設定し、overflow:hidden プロパティを適用するだけでよいと書かれていますが、うまくいかないようです。それはまだ画像の縦横比を変更しています。高さまたは幅のプロパティを単純に削除できることはわかっていますが、実際には画像を 100x100 で切り抜きたいだけです。clip:rect() を試しましたが、それを機能させる方法がわかりませんでした。理想的には、フルサイズの画像の中心から 100x100 をトリミングしたいのですが、クリップを使用すると、画像の寸法がすべて同じでない場合、これを行うことができないと思います。

.thumbnail {
    overflow:hidden;
    width:100px;
    height:100px;
    padding:10px;
    margin-left:10px;
    margin-right:10px;
    margin-top:10px;
    margin-bottom:10px;
    border:10px solid #EEEEEE;
}
4

1 に答える 1

2

css と html を使用:

最初の解決策:

html:

<div class="imageFrame">
    <img src="your_path" alt="thumb"  />
</div>

CSS:

.imageFrame {
    overflow:hidden;
    width:100px;
    height:100px;
    padding:10px;
    margin-left:10px;
    margin-right:10px;
    margin-top:10px;
    margin-bottom:10px;
    border:10px solid #EEEEEE;
    position:relative;
}

.imageFrame img{
    position: absolute;
    top:50%;
    left:50%;
    margin-left: -50px;
    margin-top: -50px;
    display: block;
}

2番目の解決策:

ここでは、いくつかの JS を使用して、画像の URL パスを に動的に追加する必要があります<div class="imageFrame"。

html :

<div class="imageFrame" style="background-image: url('your_path');"></div>

css :

.imageFrame {
    overflow:hidden;
    width:100px;
    height:100px;
    padding:10px;
    margin-left:10px;
    margin-right:10px;
    margin-top:10px;
    margin-bottom:10px;
    border:10px solid #EEEEEE;
    position:relative;
    background-repeat: no-repeat;
    background-position: center center;
}
于 2012-05-15T20:55:13.137 に答える