2

アップロードしたり、データベースで見つけたりする可能性のある可変サイズの画像が多数あります。サイズ変更を行うためのスクリプトを実行せずに、HTMLを純粋に変更したり、CSSを使用して、割り当てられた300x200のサイズに一致するように画像を歪ませたり伸ばしたりする代わりに、300x200の画像を切り抜く方法はありますか？元々大きな画像（たとえば400x400）？

私の現在のマークアップは次のようになります

<image data-src="holder.js/300x200" alt="300x200" style="width:300px; height:200px;" src={{ photo.source_descr }}>
4

1 に答える 1

3

私があなたの質問を正しく理解した場合、画像を拡大する場合とheightしない場合で、CSS/HTMLを使用して画像のサイズを変更したいと思いますwidth。代わりにトリミングします。

clipCSSでプロパティを探していると確信しています。画像をミックスclipしwidthてheightトリミングし、画像が引き伸ばされないようにしますが、目的の画像に合わせてトリミングしwidthますheight。詳細については、clipこちらをご覧ください。

ニーズに合わせてリクエストした追加のコードは次のとおりです（jQueryを使用しているため、これを機能させるには埋め込みコードが必要です）。

<style>
.container     { position: relative; overflow: hidden; }
.container img { position: absolute; }
</style>

<div class="container">
    <img src="..."/>
</div>

<script type="text/javascript">
$image = $('.container img');
width = $image.width();
height = $image.height();

$image.css({
    left: 0 - (width / 2),
    top: 0 - (height / 2)
});
</script>

この質問から2番目のスクリプトを取得したことに注意してください：中央からその場で画像をトリミングします。

于 2013-01-13T22:32:38.097 に答える