- 締切済み
CSSについての質問です。
よろしくお願いします。 画像を表示する際に、CSSで「overfloat:hidden」を指定しています。 従って、指定した縦のサイズをオーバーした場合、オーバーした下部は 切り取られて画像の上部が表示されます。 ここで、画像の上部を表示するのではなく、元画像の中心を真ん中として表示し、 上下均等に切り取って表示する、という方法はあるのでしょうか。 分かる方がいたらご教授願います。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
clip
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
> ここで、画像の上部を表示するのではなく、元画像の中心を真ん中として表示し、 > 上下均等に切り取って表示する、という方法はあるのでしょうか。 何のためにCSSのoverflow:hidden;を使っているのかが分かりません。 overflowは周囲を削ったりなんだりするためのものじゃなくて下にはみ出した部分をどう表示するか設定するためのものです。 それに切り出したいなら素直に画像を切り出したほうが環境間の差異もなくなると思いますよ。 まぁ、あえてoverflowを使っているのには何らかの事情があるのでしょうけど、そういう場合はその事情を説明したほうが良いです。 で、対処法ですがやはりpositionなどのプロパティを使うべきだと思います。 座標をずらしたり、他の案としては上の辺りに何かをかぶせて隠したりすると良んじゃないでしょうか？^^
- golive001
- ベストアンサー率54% (20/37)
真ん中に指定したい画像に対して、positionを適用してみるのはどうでしょう。 例えば、 #box{ position:relative; width:90px;//任意の幅 height:90px;//任意の高さ overflow:hidden; border:1px solid #ccc; } img{ position:absolute; top:-30px;//調整 left:-20px;//調整 } </style> <body> <div id="box"> <img src="./image/XXXXX.jpg"> <--元画像--> </div> 面倒ですが、思いつくと事としてはこんな感じです。
補足
golive001さん 回答ありがとうございます。 なるほど、確かにpositionが使えそうですね。 あとは、使っている画像のサイズが不特定の時に、都度自動的に 画像の中心が真ん中にくるように設定できればいいのですが・・・。 これはなかなか難しそうですね。
補足
MAN_MA_RUIさん 返信ありがとうございます。 overflow:hiddenは、例えば、複数の画像を一律60×60で表示するために、 イメージを外側のdivのボックスで無理矢理範囲外の部分を切り取るために 使っています。 背景としては、ユーザーが登録した不特定サイズの画像を、一覧表示させる ために、サムネイルとして表示するのを目的としています。 方法としては、ユーザーがアップロードした画像のサムネイル画像を、 内部で作成してそれをそのまま表示する方法も有ると思うのですが、まだそのやり方が分かっていないので、とりあえず、横サイズだけ指定して縮小して、縦のサイズは、もしはみ出していたら、無理矢理hiddenで切り取って表示しようと考えています。