2017-08-09 7 views
0

私はすでにいくつかのコードをwritteしています。ウェブページの右側には、画像が保存されています。私はそれらに300pxの幅を持たせたいですが、幅を変えたり、何かを変更しても機能しないようです。イメージはワードプレスでサイズ変更できませんが、他のプラットフォームでも動作しますが

私はワードプレスのため、現時点で画像にランダムなサイズがあると思います。 jsfiddleのような他のプラットフォームでは、問題なくサイズを変更できます。

画像を移動すると画像のサイズが変わるだけで、実際にはそうではありません。 .imagerightを500ピクセルに変更したいときは、何も変わりません。 解決策は誰でも知ることができますか?

plnkr:https://plnkr.co/edit/5HQy89zapAVysoVDS06Z?p=preview

ワードプレス(フルページで表示することが最善):http://giscience.zgis.at/de/concept-projekte-page/

<style> 
    .Capital { 
    margin: 0px 0 -5px 0; 
    line-height: 63px; 
    font-size: 60px; 
    font-weight: ligter; 
    } 

    .smalltext { 
    text-align: center; 
    margin-top: 0px !important; 
    font-weight: 100px; 
    font-size: 14px; 
    } 

    .square { 
    border-radius: 25px; 
    background: #73B7DB; 
    padding: 20px; 
    width: 100px; 
    height: 100px; 
    text-align: center; 
    color: #fff; 
    font-family: Arial; 
    padding-top: 10px; 
    text-decoration: none; 
    } 

    .left { 
    width: 30%; 
    margin: 05% 00% 00% 05%; 
    } 

    .container { 
    float: left; 
    margin: 0 auto; 
    width: 100%; 
    display: flex; 
    } 

    .paragraphs { 
    margin: 5% 10% 2% 00%; 
    width: 40%; 
    } 

    .right { 
    width: 30%; 
    float: right; 
    margin: 02% 00% 0% 00%; 
    } 

    .imageright { 
    width: 300px; 
    } 
</style> 






<div class="container"> 
    <div class="left"> 
    <div class="square"><span class="Capital">M</span> 
     <br><span class="smalltext">Methods</span></div> 
    </div> 
    <div class="paragraphs"> 

    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem 
    IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem 
    </div> 
    <div class="right"> 
    <img class="imageright" src="http://ideaslab.sbg.ac.at/ideaslab/wp-content/uploads/2017/07/why300x200-300dpi.jpg" /> 
    </div> 

</div> 

答えて

0

Wordpressのは、自動的に画像のサイズを変更します。それをあなたの投稿に埋め込んだら、中程度のもの(300px)かそれに類似するものを選択しました(Wordpressのフロントエンドで画像のURLを見ると、オリジナルではないURLに表示されます)

画像を編集するポストエディターから画像サイズというオプションがあります。フルサイズに設定すると、CSSを尊重する元の画像になります。

設定 - >メディアでデフォルトサイズを設定できます。

+0

画像が実際の幅が16ピクセルであっても、CSSコードに関しては、画像の幅が300ピクセルでなければならないという問題があります。これは* WordPress *画像の変更では問題ありませんが、コードやスタイルシートの読み込みに関連する問題が増えています。 –

+0

これまでのところ私が試したすべてのことはこれまでのところできていませんでした。 imagerightが機能しなくなるかもしれません:S – Lego

0

にカスタムスタイルを適用するWordPressは、あなたのスタイルシートがいつ来るかによって異なるので、扱いにくいかもしれません。WordPressテーマが読み込まれます。

.imagerightwidth : 300px;が正常に適用されているかどうかを確認するには、ブラウザでF12キーを押し、この画像のすべてのプロパティを確認してください。

  • あなたはこの行は上線見ることができるならば、これは性質があなたの後に呼ばれる別のもので上書きされたことを意味します。
  • あなたの回線が見えない場合は、<style>が適用されていないことを意味します。 WordPressテーマのCSSファイルにアクセスし、そのクラスを追加して呼び出すことができますが、これはテーマの変更がウェブサイトの他の要素に影響を与える可能性があることを暗示します。この解決策。

これがあなたに役立つことを願っています。

関連する問題