web-dev-qa-db-ja.com

HTML-Bootstrap-画像の中央部分をトリミングする方法

私はWebサイトを作成していますが、画像の向きに基づいて画像を正方形の画像にトリミングします。私はCSSにあまり詳しくないので、この問題への対処方法がわかりません。

横長の画像（800x500）の場合、トリミングした画像を次のようにしたい（500x500）：

Cropping 800x500 image

ポートレート（400x600）の場合、画像のこの部分（400x400）を切り取る必要があります。

Cropping 400x600 image

これを達成するにはどうすればよいですか？できれば、Bootstrapの「img-sensitive」と一緒に使用できる方法を使用すると、必要に応じてクロップされたサイズを変更できます。

おかげで、

htmlcssimagetwitter-bootstrap-3crop
12
FljpFl0p

@ FljpFl0p修正[jsfiddle] [1]

[1]： https://www.bootply.com/92024 そして、ここに別の答えがあります 画像を自動的にトリミングして中央に配置する方法 。 Tks！

bootstrap 4.を使用して応答性を高めたい場合は、4。これを試してください：

[〜＃〜] css [〜＃〜]

.thumb-post img {
  object-fit: none; /* Do not scale the image */
  object-position: center; /* Center the image within the element */
  width: 100%;
  max-height: 250px;
  margin-bottom: 1rem;
}
8
Állan Fidelis Toledo

CSSアプローチのみにかなり制限されているかどうかはわかりませんが、JavaScriptアプローチは、画像のサイズを取得し、overflow:hiddenを使用してdivでラップすることで役立ちます。

$width = $(".box img").css('width');
$height = $(".box img").css('height');
$max = (($width < $height) ? $width : $height);

$(".box").css("width", $max);
$(".box").css("height", $max);
.box {
  margin: 5px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">
  <img src="https://placehold.it/300x200">
</div>
0
ajib

画像を拡大縮小し、幅/高さの比率を維持するimgタグにクラスimg-sensitiveを追加します。結果に満足できない場合は、Javascriptを使用してみます。

0
Jimmy