3

私のサイトでは、2 ～ 4 行の引用、バイラインとバイラインの説明 (またはタイトル/サブタイトルなど)、およびボックスの左下に完全に配置された円形にトリミングされた写真を含むこれらの小さな引用ボックスを作成しました。 . 私は基本的なjs fiddleを実行しました。

(私の実際のコードで動作する方法は、私のクラスが円の直径を供給する SASS mixin を持っていることです。):

ハムル

.circle-photo-div{ style: "background: url(#{photo_url})" }

サス

.circle-photo-div
  @include circle-photo(110)
  position: absolute
  bottom: -19%
  left: -7%

@mixin circle-photo($diameter)
  width: #{$diameter}px
  height: #{$diameter}px
  border-radius: #{$diameter / 2.0}px
  -webkit-border-radius: #{$diameter / 2.0}px
  -moz-border-radius: #{$diameter / 2.0}px
  margin: 1em auto
  background-size: cover
  background-repeat: no-repeat
  background-position: center center
  -webkit-border-radius: 99em
  -moz-border-radius: 99em
  border-radius: 99em
  border: 5px solid white
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.8)

いずれにせよ、今ではページを完全にレスポンシブにしました - これらの円の写真を除いて.

問題は、ページが拡大した場合、写真も拡大したいのですが、新しい理想的な直径をクラスに供給して、sass mixin に供給する方法がわかりません。だから私は完璧にスケーリングするページを持っていますが、これらの写真は小さすぎるか大きすぎます.

これを行う方法はありますか?応答に応じてサイズを変更し、ボックスの左下の相対的な位置を維持する円でトリミングされた写真を作成するには (これは、絶対的な位置も変更する必要があることを意味すると思います)?

4

1 に答える 1

1

答えは vw/vh でした。

http://css-tricks.com/viewport-sized-typography/

円の寸法をパーセンテージ ベースにすると、コンテナーの高さがコンテナーの幅と等しくない限り、円は楕円に変わります。 x 200px コンテナは、実際には 80px x 160px です)。

トリックは、vw ユニットを使用して、円の直径をコンテナー/ウィンドウの幅だけの関数にすることでした。そうすれば、画像は楕円形に歪むことなく、ウィンドウに合わせてサイズ変更されます。

于 2013-07-24T21:02:43.913 に答える