其上有圖形/文字至100％寬度/高度的適合/縮放圖像

I have an image即分辨率爲1920x1080。該圖像是由一個圖形團隊創建的，並且上面有很多文本/圖形。我不確定是否有CSS和/或JavaScript/jQuery的方式，當頁面加載時，此圖像在加載時佔用屏幕的100％。用戶然後可以向下滾動瀏覽並查看頁面內容的其餘部分。其上有圖形/文字至100％寬度/高度的適合/縮放圖像

現在我想這樣的事情（使用自舉）：

<header> 
    <img src="http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg" class="img-responsive" /> 
    <div id="event-callout"> 
     Ciudad de México Marzo 7th o Marzo 8th 2016 
    </div> 
</header>

它不工作了太清楚，因爲隨着視口大小開始接近1770px，圖像開始比高度垂直高因此導致圖像中的一些文本從頁面滾動。

我想讓圖像適合屏幕尺寸（在頁面高度的100％負載下）。我已經嘗試過涉及jQuery和CSS的多種解決方案，但似乎都不符合這些基本要求。它甚至有可能嗎？

編輯：這裏

#hero { 
    background-image: url(http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg); 
    background-size: cover; 
    position: relative; 
    height: 100vh; 
} 


<wrapper id="wrapper"> 
    <div id="hero"></div> 
</wrapper>

的另一種嘗試這種解決方案並不像不適合屏幕，因爲它按比例縮小。

編輯2：jQuery的嘗試這裏

#hero{ 
    background-image:url(http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg); 
    background-size:cover; 
    position:relative; 
} 

<wrapper id="wrapper"> 
    <div id="hero"></div> 
</wrapper> 

$(window).scroll(function (e) { 
    handleScroll(); 
}); 

function fullscreen() { 
    $('#hero').css({ 
     width: $(window).width(), 
     height: $(window).height() 
    }); 
} 

fullscreen(); 

// Run the function in case of window resize 
$(window).resize(function() { 
    fullscreen(); 
});

得到相同的結果，因爲它似乎在CSS版本。

來源

2016-02-15 mariocatch

你可以發佈你的嘗試，特別是你的CSS嘗試嗎？ – Michelangelo

@Mikey增加了CSS和jQuery嘗試。以下[本指南]（http://www.web2feel.com/creating-a-fullscreen-hero-div-for-your-site-header/） – mariocatch

我認爲你缺少背景圖像的一些CSS規則：你試過這個：https://css-tricks.com/perfect-full-page-background-image/ – Michelangelo

這是否適合您？ ...並通過添加底部填充來保持其縱橫比。

html, body { margin: 0; } 
 

 
#hero { 
 
    background-image: url(http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    width: 100%; 
 
    padding-bottom: 56.25%; /* 1080/1920 = 0.5625 */ 
 
}

<div id="hero"></div> 
 
<div class="content"> 
 
Bla bla<br> 
 
Bla bla<br> 
 
Bla bla<br> 
 
Bla bla<br> 
 
Bla bla<br> 
 
Bla bla<br> 
 
Bla bla<br> 
 
</div>

樣品2

html, body { margin: 0; } 
 

 
.hero { 
 
    height: 100vh; 
 
} 
 

 
.hero img { 
 
    display: block; 
 
    margin: 0 auto; 
 
    max-height:100%; 
 
    max-width: 100%; 
 
}

<div class="hero"> 
 
    <img src="http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg" /> 
 
</div>

來源

2016-02-15 20:00:36 LGSon

這很接近，但圖像的底部不顯示在屏幕上（帶有文本的藍色條）。 – mariocatch

@mariocatch我可以讀「ESCANEO 3D ...」等等。你的意思是需要滾動才能看到它？ – LGSon

我無法在1920 x 1080分辨率上看到它。我必須滾動才能看到它。我試圖找出如何在頁面加載時將其保留在屏幕上。 – mariocatch

試試這個

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Document</title> 
<style> 
     html,body{ 
     padding: 0; 
     margin: 0; 
     height: 100%; 
     } 
    img{ 
     height: 100%; 
     width: 100%; 
    } 
</style> 
</head> 
<body> 
<img src="http://az860851.vo.msecnd.net/release/site/3DScantoPrint_landing_hero.jpg" alt="Hero"> 
<div>Other</div> 
<div>Other</div> 
<div>Other</div> 
</body> 
</html>

來源

2016-02-15 20:06:10

不會，這會導致圖像比屏幕寬度拉伸得更遠，並切斷圖像的底部。 – mariocatch

其中你正在測試它的分辨率 –

1920 x 1080分辨率 – mariocatch

我想我已經解決了你的問題？ https://jsfiddle.net/Microsmsm/yuf56uv0/

img { 
 
    width:100%; 
 
    height:auto; 
 
}

來源

2016-02-15 20:54:20 Microsmsm

真正的答案，作爲評論表明，是沒有辦法做到這一點，同時保持圖像的屏幕尺寸縱橫比和可讀性變化。

解決方法是不要將所有文本/圖形都放在一個巨大的圖像上，並嘗試使用它，而是將其分解爲組件，然後相應地使用html/css將它們拼接在頁面上。這樣，他們可以隨着屏幕尺寸的變化而移動/移動，同時仍然保持消息清晰。

來源

2016-02-16 14:42:31 mariocatch

其上有圖形/文字至100％寬度/高度的適合/縮放圖像

回答

相關問題