0

私は何か「小さい」もので大きな問題を抱えており、私はそれを理解することができず、ここにいるすべての人に手を差し伸べています. 私が抱えている問題はこれです：

幅が約 512 ピクセルまたは 800 ピクセルの写真があり、中央に合わせて円形の表示領域に収め、ホバー効果を維持します。また、写真のサイズを調整して、中央の部分に適切な量の写真が表示されるようにする必要もあります。

私が取り組んでいる現在のコードは、写真が完全な正方形の場合、それらを完全な円にします。問題は、写真が長方形の場合、楕円形に変わることです。

以下のように、overflow:hidden と css を使用して div を作成しましたが、現在の CSS と競合していました。どんな助けでも大歓迎です！

.thumby {
width:200px;
margin: 0 auto;
overflow:hidden;
position: relative;
height: 200px;
border-radius: 100% 100% 100% 100%;

}

img.absolutely {
left: 50%;
margin-left: -256px;
top: 50%;
margin-top: -200px;
position:absolute;
width:512px;

}

これが私の開発ページへのリンクです。

http://www.lmcodebox.com/b-test/index5.html

http://www.lmcodebox.com/b-test/portfolio.html

4

3 に答える 3

1

画像をdivの背景として設定することを考えましたか? このようにして、すでに使用しているすべての効果を保持し、外側の div に影響を与えずに背景の位置を操作する方法があります。完全なラウンド div を持つ他の可能な解決策は、このギャラリー チュートリアルのように ::after 疑似クラスを使用することです: http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2

誤解していたらすみません、お役に立てば幸いです。

PS .: ちなみに、美しいテスト ページです。

于 2013-02-22T20:39:29.263 に答える
0

まず、円を作成するために境界半径を50％に設定するだけで済みます。各コーナーが同じ値の場合は、次のように1回入力するだけです。

border-radius:50%;

これらの画像が長方形である限り、画像をスパンの背景として設定し、正方形として形成される高さと幅を指定して、表示ブロックを使用することができます。これにより、写真のプロポーショナルは維持されますが、正方形にすることができます。

ただし、表示する画像が多い場合は、マークアップが少し混乱する可能性があります。別の解決策は、より多くの作業を意味しますが、私は個人的にそれを行いますが、フォトショップまたは他の画像編集ツールを使用して、サムネイル用に画像を正方形にトリミングすることです。

何よりも、リンクしたページで実際に宣言されている幅や高さはわかりません。それらを正しいクラスに配置しましたか？境界線の半径が宣言されているのがわかりますが、max-width：100％しか表示されていません。幅：200pxまたは高さ：200pxではありません

于 2013-02-22T20:45:47.887 に答える
0

上記のmadaaahのように、画像を要素の背景として使用するという提案で問題を再考しました.

私がやったことは、次のように A タグの周りに DIV をラップすることでした。

次に、A の背景を次のように設定します: style="background:url(PHOTO URL HERE) no-repeat;background-position:center;">

最後に、A タグの内側に正方形の画像 (800 x 800) を作成して、丸い形を維持し、完全に透明にして、背景画像が見えるようにし、「応答」方法で拡大および縮小します。

于 2013-03-12T08:06:00.370 に答える