私の計画は以下の通りです:
ブラウザの幅に基づいて読み込まれたいくつかの写真で簡単な静的なウェブサイトを作成します。
私がそこに見つけた提案を試しました:
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ファイルです
はあなたが水平方向に中央揃えにしたい '表示:インラインブロック; margin:0 auto; 'あなたのイメージでは、' text-align:center; 'は親が作業を行うべきです。それを試しましたか?あなたのhtml構文に「
」というエラーがあります。既に気づいたことがありますか? –[link](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use) -srcset /)は問題を解決しませんが、jqueryを使ってさまざまな幅の異なる画像を動的に設定するよりも良い方法です: –
エラーを指摘してくれてありがとう - しかし、スタイリングでは解決できませんでした。彼らは(リンクされた)質問にも言及されました。そして、私はいつもキャッシュなしでサイトを見ることに言及する必要があります。 @ValentinoPereira:それはかなりクールに見えますが、それはM $:EdgeとIEでサポートされていませんので、代替案を使用する必要があります。 – Garamaru