與HTML5圖像橫幅問題CSS3不擴展爲父母

感謝您閱讀我的問題，我工作在一個有橫幅系統的登陸頁面，用css3和html5和jquery/javascript，我一直工作了3天現在，我看不到問題，圖像是簡短的內容/父元素，這裏是網頁，所以你可以幫助我弄清楚發生了什麼。與HTML5圖像橫幅問題CSS3不擴展爲父母

http://topcoders.directoryup.com/landingpage/

HTML

<section class="city-section 
      first-city" 
      data-city="banner_0" data-bgColor="2"> 
      <div class="align-flex-end grid-flex-columns"> 

    <svg class="city-line new-york-line" viewBox="0 0 1911 1076" preserveAspectRatio="xMidYMid slice"> 
     <image class="bg" width="100%" height="100%" style="height:100% !important;width:100% !important;" xlink:href="images/2_a.jpg" overflow="visible"></image> 
     <path data-offset="2871" data-rightLeft="M1939.9 478c-124.9-80.3-327.3 51.1-369.6 80.4-10.5 7.3-21.8 13.4-33.8 17.8-140.9 51.7-215.4-162.5-296.6-219.1-86-60-177 180.9-238 180.9-67.1 0-102.5-439.8-157.3-439.8-44.2 0-62.3 116.6-92.7 271.8-29.5 150.6-81.1 200.1-155.5 140.1-100.5-81-222.5 187.9-398.5 80.4-132.6-81-212-102.5-212-102.5" data-leftRight="M-14.1 488s79.4 21.5 212 102.5c176 107.5 298-161.4 398.5-80.4 74.4 60 126 10.5 155.5-140.1 30.4-155.2 48.5-271.8 92.7-271.8 54.8 0 90.2 439.8 157.3 439.8 61 0 152-240.9 238-180.9 81.2 56.6 155.7 270.8 296.6 219.1 12-4.4 23.3-10.5 33.8-17.8 42.3-29.3 244.7-160.7 369.6-80.4" d="M-14.1 488s79.4 21.5 212 102.5c176 107.5 298-161.4 398.5-80.4 74.4 60 126 10.5 155.5-140.1 30.4-155.2 48.5-271.8 92.7-271.8 54.8 0 90.2 439.8 157.3 439.8 61 0 152-240.9 238-180.9 81.2 56.6 155.7 270.8 296.6 219.1 12-4.4 23.3-10.5 33.8-17.8 42.3-29.3 244.7-160.7 369.6-80.4"></path> 
    </svg> 

    <div class="city-section-content grid"> 
     <div class="grid-cell"> 
      <h2>An eDirectory</h2> 
      <p>An eDirectory</p> 
      <a class="modal notified-modal no-url-update" data-remote="true" href="#">More Info</a> 
     </div> 
    </div> 

    <span class="left-hitzone"></span> 
    <span class="right-hitzone"></span> 
</section> 
        <section class="city-section 
      " 
      data-city="banner_1" data-bgColor="1"> 
      <div class="align-flex-end grid-flex-columns"> 

    <svg class="city-line new-york-line" viewBox="0 0 1911 1076" preserveAspectRatio="xMidYMid slice"> 
     <image class="bg" width="100%" height="100%" style="height:100% !important;width:100% !important;" xlink:href="images/2_b.jpg" overflow="visible"></image> 
     <path data-offset="2871" data-rightLeft="M1939.9 478c-124.9-80.3-327.3 51.1-369.6 80.4-10.5 7.3-21.8 13.4-33.8 17.8-140.9 51.7-215.4-162.5-296.6-219.1-86-60-177 180.9-238 180.9-67.1 0-102.5-439.8-157.3-439.8-44.2 0-62.3 116.6-92.7 271.8-29.5 150.6-81.1 200.1-155.5 140.1-100.5-81-222.5 187.9-398.5 80.4-132.6-81-212-102.5-212-102.5" data-leftRight="M-14.1 488s79.4 21.5 212 102.5c176 107.5 298-161.4 398.5-80.4 74.4 60 126 10.5 155.5-140.1 30.4-155.2 48.5-271.8 92.7-271.8 54.8 0 90.2 439.8 157.3 439.8 61 0 152-240.9 238-180.9 81.2 56.6 155.7 270.8 296.6 219.1 12-4.4 23.3-10.5 33.8-17.8 42.3-29.3 244.7-160.7 369.6-80.4" d="M-14.1 488s79.4 21.5 212 102.5c176 107.5 298-161.4 398.5-80.4 74.4 60 126 10.5 155.5-140.1 30.4-155.2 48.5-271.8 92.7-271.8 54.8 0 90.2 439.8 157.3 439.8 61 0 152-240.9 238-180.9 81.2 56.6 155.7 270.8 296.6 219.1 12-4.4 23.3-10.5 33.8-17.8 42.3-29.3 244.7-160.7 369.6-80.4"></path> 
    </svg> 

    <div class="city-section-content grid"> 
     <div class="grid-cell"> 
      <h2>A Responsive Website Creator</h2> 
      <p>A Responsive Website Creator</p> 
      <a class="modal notified-modal no-url-update" data-remote="true" href="#">More Info</a> 
     </div> 
    </div> 

    <span class="left-hitzone"></span> 
    <span class="right-hitzone"></span> 
</section> 
        <section class="city-section 
      " 
      data-city="banner_2" data-bgColor="0"> 
      <div class="align-flex-end grid-flex-columns"> 

    <svg class="city-line new-york-line" viewBox="0 0 1911 1076" preserveAspectRatio="xMidYMid slice"> 
     <image class="bg" width="100%" height="100%" style="height:100% !important;width:100% !important;" xlink:href="images/2_c.jpg" overflow="visible"></image> 
     <path data-offset="2871" data-rightLeft="M1939.9 478c-124.9-80.3-327.3 51.1-369.6 80.4-10.5 7.3-21.8 13.4-33.8 17.8-140.9 51.7-215.4-162.5-296.6-219.1-86-60-177 180.9-238 180.9-67.1 0-102.5-439.8-157.3-439.8-44.2 0-62.3 116.6-92.7 271.8-29.5 150.6-81.1 200.1-155.5 140.1-100.5-81-222.5 187.9-398.5 80.4-132.6-81-212-102.5-212-102.5" data-leftRight="M-14.1 488s79.4 21.5 212 102.5c176 107.5 298-161.4 398.5-80.4 74.4 60 126 10.5 155.5-140.1 30.4-155.2 48.5-271.8 92.7-271.8 54.8 0 90.2 439.8 157.3 439.8 61 0 152-240.9 238-180.9 81.2 56.6 155.7 270.8 296.6 219.1 12-4.4 23.3-10.5 33.8-17.8 42.3-29.3 244.7-160.7 369.6-80.4" d="M-14.1 488s79.4 21.5 212 102.5c176 107.5 298-161.4 398.5-80.4 74.4 60 126 10.5 155.5-140.1 30.4-155.2 48.5-271.8 92.7-271.8 54.8 0 90.2 439.8 157.3 439.8 61 0 152-240.9 238-180.9 81.2 56.6 155.7 270.8 296.6 219.1 12-4.4 23.3-10.5 33.8-17.8 42.3-29.3 244.7-160.7 369.6-80.4"></path> 
    </svg> 

    <div class="city-section-content grid"> 
     <div class="grid-cell"> 
      <h2>A Learning &amp; Workforce System</h2> 
      <p>A Learning &amp; Workforce System</p> 
      <a class="modal notified-modal no-url-update" data-remote="true" href="#">More Info</a> 
     </div> 
    </div> 

    <span class="left-hitzone"></span> 
    <span class="right-hitzone"></span> 
</section>

UPDATE

當我使用邊界：無任何地方分頁符

來源

2017-03-09 ricardorios

您必須在此處顯示代碼。否則，一旦修復鏈接的網站，這個問題就變得毫無用處。 – Shilly

@Shilly是很多代碼把它粘貼在這裏 – ricardorios

要求的圖像尺寸：1911x1076像素請替換原來的文件附件。

來源

2017-03-09 15:54:28 vishalgelani

有沒有辦法強制圖像的大小？ – ricardorios

是的很多種植後，這是問題 – ricardorios

你試過border:none;對於s撓度？ :)

來源

2017-03-09 15:42:37 Mintaras

它打破了所有的網站與邊界：無; – ricardorios

也許就像那樣（僅適用於活動）？ .city-section.on { border：none; } – Mintaras

同樣，它打破了一切 – ricardorios

使用此

.content-main-wrapper .city-section { 
border:none; 
}

來源

2017-03-09 15:46:19 Ajay

它打破了所有的網站與邊界：無; – ricardorios

與HTML5圖像橫幅問題CSS3不擴展爲父母

回答

相關問題