ブラウザ上でコンテナをズームしてサイズを変更する

画像に必要なバナーを作成するために、三角形と四角形を使用して以下のバナーを作成しました。しかし、ユーザがブラウザをズームすると、これらの2つのコンテナはそれらの間にギャップを有する。どのように私は2つのコンテナを一緒に修正するか、CSSを使用して一般的にこのバナーを書くより良いアプローチはありますか？前もって感謝します！ :)ブラウザ上でコンテナをズームしてサイズを変更する

コード：

<html> 
<style> 
#triangle { 
    width: 0; 
    height: 0; 
    border-bottom: 150px solid red; 
    border-right: 50px solid transparent; 
    top: 8px; 
    position: relative; 
} 

#square { 
    background-color:red; 
    height:150px; 
    width:300px; 
    z-index: 3; 
    margin-left: 8px; 
    top: 8px; 
    position: relative; 
    color: white; 
} 

.align div { 
    display:inline-block; 
    float: left; 
} 


</style> 
<div class="img"> 
    <img src="IMAGE HERE" alt="test" width="800" height="150"> 
</div> 
<div class="align"> 
    <div id="square"> 
    <h1> 
    Headline 
    </h1> 
    <p> 
    Some text here! 
    </p> 
    </div> 
    <div id="triangle"></div> 
</div> 
</html>

出典

2016-08-11 Andrew

あなたのhtmlはどこですか？ –

私のミスについては申し訳ありません。 HTMLが追加されました:) – Andrew

JSFiddleでコードを見るときにギャップが表示されません – Relisora

私は長方形と私のブラウザ上の三角形の間に空白が表示されませんでした。

#triangle { 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 150px solid red; 
 
    border-right: 50px solid transparent; 
 
    top: 8px; 
 
    position: relative; 
 
} 
 

 
#square { 
 
    background-color:red; 
 
    height:150px; 
 
    width:300px; 
 
    z-index: 3; 
 
    margin-left: 8px; 
 
    top: 8px; 
 
    position: relative; 
 
    color: white; 
 
} 
 

 
.align div{ 
 
    display:inline-block; 
 
    float: left; 
 
} 
 

 
.align { 
 
    min-width:450px; 
 
}

<div class="align"> 
 
    <div id="square"> 
 
    <h1> 
 
     Title 
 
    </h1> 
 
    <p> 
 
    Some text here....... 
 
    </p> 
 
    </div> 
 
    <div id="triangle"></div> 
 
</div>

EDIT：は400％ズームで整列を修正あなたはこれを試すことができますので、しかし、私はあなたのコードを掃除しました。 min-width〜.alignが追加されました。

出典

2016-08-11 06:34:44 Relisora

コードに応じて「絶対」を「相対」に変更しましたが、同じ問題があります。 JSFiddleで実行すると、200％以上でズームインする必要があるため、この問題は表示されません。 FirefoxとChromeの両方で問題が発生しました。他の潜在的な修正やこれは別の方法で書かれている可能性がありますか？ – Andrew

「絶対」から「相対」に変更されただけではありません。私たちはどこかで問題を見てみることができますか？ – Relisora

更新されたCSSを質問の本文に追加し、ローカルに実行できるようにhtmlタグを追加しました。クロムで400％にズームインすると、三角形が下のラインまで下がります。私はそれらを1つのコンテナのように扱う方法を見つける必要があります。 2つではなく1つのコンテナでこれを作成することは可能ですか？ – Andrew

この問題はブラウザによって異なり、すべてのブラウザで同じ問題が発生するわけではありません。クロムは完璧に見えるかもしれませんが、モジラが問題を示すかもしれません。また、reset cssを使用して、ブラウザに依存するCSSプロパティを回避します。

出典

2016-08-11 07:29:55

ブラウザ上でコンテナをズームしてサイズを変更する

答えて

関連する問題