2017-06-02 21 views
0

私はCSSの初心者です。この質問のタイトルが私が知りたいと思っているかどうかはわかりません。私は作っているウェブサイトでこれを持っています: enter image description here
この正方形のボックスには、商品のおすすめ画像が入っています。今度は画像が長方形で、それを正方形で表示したいと思います。ドレスが切れても、女の子の顔を見せなければならないのは大丈夫です。
私はこのイメージの中心点を左上に移動する方法は何ですか?追加情報が必要であることを明確にしていない場合は、私に尋ねてください。
これは、このイメージが中に配置されたdiv要素の名前です:私は、画像を背景画像として定義されているとしenter image description hereenter image description heredivの画像を少し下に移動するには

+0

あなたが現在持っているスクリーンショットと問題を再現するコードを投稿してください。 –

+0

画像はdivの背景として設定されていますか、div内の別の画像要素ですか? – Kurt

+0

@Kurtそれは私が確信しているバックグラウンドイメージではありません –

答えて

2

:ここにコメントをもとに

.attachment-post-thumbnail 
{ 
/*what to write here*/ 
} 

このセクションのコードでありますその容器のために.attachment-post-thumbnail

背景画像のサイズは現時点ではcoverに設定されており、その位置は「中心の中心」(すなわち水平および垂直)に設定されている可能性があります。

background-size: coverを使用することはできますが、.attachment-post-thumbnailルールにはbackground-position: center top;を追加します。このルールでは、イメージの上部をそのコンテナの上部に合わせる必要があります。それでも問題が解決しない場合は、!important(つまり.attachment-post-thumbnail { background-position: center top !important; })を追加して強制することができます。

+0

はいこれはまさに私が探していたものですが、これはWordPressであり、カスタムCSSセクションの.attachment-post-thumbnailを上書きしています。したがって、wordpressは実際に300x300の画像を変換します。多分問題はtherです。どうもありがとうございました。 –

+0

画像を300x300に変換することはありません。画像を圧縮/歪曲するので(画像全体を表示しても歪んでしまいます)それは私が記述した方法でそれらの位置を定めるだけです。 – Johannes

+0

Ooo ...まあ、あなたの答えはうまくいかなかった:/ '.attachment-post-thumbnail { background-position:center top; } 'もし私が重要な行を追加すると、'重要なの使用 'という警告が表示されますが、まだ保存していますが動作していません。私はスクリーンショットでいくつかのコードを添付して、問題をよりよく理解するのに役立つかもしれません。 –

関連する問題