6

ブートストラップで img-responsive クラスを使用するのは初めてです。次のページがあります。

ここに画像の説明を入力 たとえば、右の画像のように、画像を同じ比率でそこに表示したい。この CSS を追加し、クラスを画像に適用しましたが、ウィンドウのサイズを変更すると、応答性の高いサイズ変更が比例しません。

.imageClip{
    width:350px;
    height:255px;
    overflow:hidden;
}

CSS を追加してサイズを変更する例:

ここに画像の説明を入力

これは私のコードです:

<div class="col-sm-4">

      <img class="img-responsive imageClip" src="{$servicio.med_ruta}">

      <h3>{$servicio.ser_nombre}</h3>
      <p>{$servicio.ser_descripcion}</p>
      <a class="btn btn-link btn-sm pull-right">More <i class="icon-angle-right"></i></a>
 </div>

不均衡なサイズ変更なしでこれを行う方法があるかどうかを知りたいです。ありがとうございました

4

2 に答える 2

6

で試してください：

.imageClip{
    width:30%;
    height: auto;
    overflow:hidden;
}

それは比例を保ち、反応します。(私はデフォルトで 30% を入れています。自由に調整してください)

于 2013-10-29T21:25:38.017 に答える
0

これは、画像を特定の比率に合わせるように強制しているためです...

.imageClip
    {
    width:350px;
    height:255px;
    overflow:hidden;
    }

画像が 350x255 に収まる比率でない限り、不均衡になります。幅または高さのいずれかを設定し、反対の軸を自動に設定する必要があります。これにより、ブラウザは画像を比例してサイズ変更できます。

.imageClip
    {
    width:350px;
    height:auto;
    overflow:hidden;
    }
于 2013-10-29T21:32:09.487 に答える