イメージの元のサイズを超えてdivをカバーするイメージをアップスケールする方法はありますか？

div要素をカバーするようにイメージを作成する方法はありますか（CSSを使用する方法）、アップスケーリングで元の寸法を上書きせずに行うことができる場合にのみ可能ですか？イメージの元のサイズを超えてdivをカバーするイメージをアップスケールする方法はありますか？

ピクセル化された画像を防止すること。 Object-fit 'cover'イメージが小さすぎてもアップスケールされます。 'contain' divを覆うように画像をプッシュしないでください。

私は何をしたいのですか？

編集：

でも'contain'はその悪いように動作すると思われます。元の画像よりも画像が大きくても、親要素のエッジに画像を拡大します。それは狂っている...それじゃない？

そして、WordPressで少なくともアスペクト比ではなく正確なサイズで画像サイズを追加することができるかどうかを確認しようとしています。私はちょうどイメージの所定の比率にクロップ、変更したい。それは少なくとも少し助けることができます。しかし、いいえ、そのための機能はありません。アップロード後に使用できる画像エディタだけです...

敏感な考えはどこですか？ピクセルではなく、アスペクト比が未来ですか？

出典

2017-08-16 Peter Westerlund

実生活では。 – TylerH

画像を「カバー」のように振るが、切り取らないようにしたいですか？ –

@タイラーHそれは私が意味するものではありません。私が言ったように、元の画像サイズを上書きするならば、それをアップスケールしたくはありません。 –

私は研究のビットを行なったし、あなたにこのソリューションを提供することができます：

イメージbackground-size +オート
（別売）用の固定幅を設定背景画像
にする必要がありますが.img-containerも（20vh）柔軟であり、それは100pxにより小さいを取得する場合、画像をトリミングこの例で美学

ための画像をセンタリングすることができ。固定されたbackground-sizeの値は、イメージのスケールアップも防止します。

は、フレキシブルコンテナ

.img-container { 
 
    width: 60vh; 
 
    height: 60vh; 
 
    border: 2px solid #111; 
 

 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-size: 100px auto; 
 

 
    background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); 
 
}

<div class="img-container"></div>

をチェックする jsFiddleを作成

いいえ、CSSは、画像がランダムな人物によると、「あまりにもピクセル化」であるとき知るための方法はありません

出典

2017-08-16 14:27:29

しかし、私は100px幅以下の画像ではうまくいかないと思いますか？その広い画像は切り取られません。代わりに「含む」と行動するでしょうか？私が 'background-size：auto 100px;'に変更しないと？ –

固定img-widthsと固定CSS値でのみ行うことができます。 @ TylerHのように、CSSは画像がピクセル化されるかどうかを知ることができません。例えば、それだけを定義することができます。 48x48 'background-images'は48x48ピクセルより大きくなりません。 –

ピクセル化については忘れてしまった。私はちょうど元のサイズの上にイメージを高級にしたくありません。 CSSは少なくとも画像の寸法、幅、高さを知っているようです。 –

イメージの元のサイズを超えてdivをカバーするイメージをアップスケールする方法はありますか？

答えて

関連する問題