2

chrome と svgs に問題があります。

2 つの svg を 400px までの画面幅の 100% にしたいと考えています。したがって、モバイル画面では垂直方向に整列し、デスクトップでは水平方向に整列します。

これは、クロムを除く、私がチェックしたすべてのブラウザーで発生しています。以下で詳しく説明します。

関連する SVG

   viewport 0 0 400 150

関連CSS

.svg{
margin-right:auto;
margin-left:auto;
width: 100%;
max-width: 400px;
background-color: aliceblue;
max-height: 150px;
}

関連する JavaScript

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script  type="text/javascript">
var imageWidth = 1*$(window).width();
var imageHeight = .425*$(window).width();
$("document").ready(function(){
        $(".svg").css("width", imageWidth);
        $(".svg").css("height",imageHeight);
});   
</script>

関連する HTML

    <object class="svg" type="image/svg+xml"  data="/svg/betterLearning1.svg" >
    </object>    
    <object class="svg" type="image/svg+xml"  data="/svg/betterLearning2.svg" >
    </object>

Chrome の inspect 要素を見ると、css max-width が JavaScript で生成された幅を上書きしていることがわかりますが、高さは変更されておらず、スクリプトどおりのままです。

編集潜在的な回避策は、CSS を生成する前に JavaScript 変数を制限することです。

if (imageWidth > 400){
    imageWidth = 400;
 }
if (imageHeight > 150){
imageHeight = 150;
}
4

0 に答える 0