2017-06-18 9 views
0

私の計画は以下の通りです:
ブラウザの幅に基づいて読み込まれたいくつかの写真で簡単な静的なウェブサイトを作成します。
私がそこに見つけた提案を試しました:
I'm unable to center an image inside a div after being loaded with jquery
しかし、それは私にとってはうまくいかないようです。私はそこで答えを試みたが、それは助けにはならなかった。
私もこれとその後のプロパティを変更しようとしました:あまりにもその中のリンクでセンターHTML要素がjQueryでロードされました

$('.headerImg').css('margin','auto'); 

やアイデアのいくつか。しかし、それは中心の位置を無視するようだ。テスト用の画像は画面の幅に応じて正しく表示され、CSSファイルには複数の定義がありません。誰もが手掛かりを持っている場合、私は...それを感謝し、真にう

マイコード:

//const enum to define where 
var width = { 
    large:1280, 
    medium:800, 
    small:460, 
    xsmall:330 
}; 

//sets the size for the header image 
function getImageSize(){ 
    var size = ""; 
    var screenWidth = localStorage.getItem("windowWith"); 
    if(screenWidth > width.medium){ 
     console.log("loading large picture"); 
     size = "large"; 
    } 
    else if(screenWidth <= width.medium && screenWidth > width.small){ 
     console.log("loading medium picture"); 
     size = "medium"; 
    } 
    else if(screenWidth <= width.small && screenWidth > width.xsmall){ 
     console.log("loading small picture"); 
     size = "small"; 
    } 
    else if(screenWidth < width.small){ 
     console.log("loading xsmall picture"); 
     size = "xsmall"; 
    } 
    if(size == ""){ 
     size = "xsmall"; 
     console.log("Error - screen size not found - loading xsmall header"); 
    } 
    return size; 
} 
:ここ

<html> 
    <head> 
     <title>broken</title> 
     <!--styling--> 
     <link rel="stylesheet" type="/styling/" href="styles.css"> 
    </head> 

    <body> 
    <!-- Scripts--> 
     <script src="scripts/jquery-3.2.1.min.js"></script> 
     <script type="text/javascript" src="scripts/constants.js"></script> 
     <!-- fetch and store screen sizes--> 
     <script type="text/javascript"> 
      localStorage.setItem("windowWith", screen.width); 
      localStorage.setItem("windowHeight", screen.height); 
      localStorage.setItem("imageSize", getImageSize()); 
     </script> 

     <!--Header--> 
     <div class="header"> 
      <script type="text/javascript"> 
      var path = "media/img/header_" + localStorage.getItem("imageSize") + ".jpg"; 
      $(document).ready(function() { 
       $('.headerImg').attr("src", path); 
      }); 
      </script> 
      <img class="headerImg"></img> 
      <br> 
      <div class)"menuItems"></div> 
     </div> 
     <!--Middle--> 
     <div class="middle"></div> 
     <!--Footer--> 
     <div class="footer"></div> 
    </body> 
</html> 

と画像が撮像された計算のために必要* .jsファイルです

+0

はあなたが水平方向に中央揃えにしたい '表示:インラインブロック; margin:0 auto; 'あなたのイメージでは、' text-align:center; 'は親が作業を行うべきです。それを試しましたか?あなたのhtml構文に「

」というエラーがあります。既に気づいたことがありますか? –

+0

[link](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use) -srcset /)は問題を解決しませんが、jqueryを使ってさまざまな幅の異なる画像を動的に設定するよりも良い方法です: –

+0

エラーを指摘してくれてありがとう - しかし、スタイリングでは解決できませんでした。彼らは(リンクされた)質問にも言及されました。そして、私はいつもキャッシュなしでサイトを見ることに言及する必要があります。 @ValentinoPereira:それはかなりクールに見えますが、それはM $:EdgeとIEでサポートされていませんので、代替案を使用する必要があります。 – Garamaru

答えて

1

イメージタグはインライン要素で、 "margin:0 auto;"でセンタリングすることはできません。

イメージを「display:block;」にします。

あなたのCSSは次のようにする必要があります:

.headerImg { 
    display: block; 
    margin: 0 auto; 
} 
+0

悲しいことに、それは私にとってはうまくいかない。なぜ私はそれが動作しないのか分からない。キャッシュなしでページをリフレッシュし、シークレットモードを試して、何かがバッファリングされた場合にローカルのXAMPP(Apache)を再起動しました。 – Garamaru

+0

イメージにCSSの幅を設定するのを忘れました。あなたはjsでそれを設定する必要があります。 – Olga

+1

またはより良い解決策。イメージにスタイルを追加しないで、divでラップしてください。

Olga

関連する問題