スクエア画像を画面全体に合わせてスクロールさせないにはどうしたらいいですか？

私はhtml/cssに関することを知っていますが、私はプロではありません。私は7,20cm x、7,20cmの画像を持っていますが、それは私の画面サイズを完全に満たしますが、私は大きな画面で見ると大きすぎるのでスクロールして喜ばしく見えません...大画面で同じ効果を得るにはどうすればいいですか？事前にすべてのあなたのためのありがとうございます。スクエア画像を画面全体に合わせてスクロールさせないにはどうしたらいいですか？

HTML 

<body> 
<div class="logo"> 
    <a href="projects.html" class="transition"> 
     <img src="lg.png" width="40%" alt="" /> 
    </a> 
</div> 
<footer>copyright 2016 matic toni</footer> 

</body> 

CSS 

@charset "utf-8"; 
div { 
text-align: center; 
padding-bottom: 30px; 
} 
body { 
/* background-image: url(background.jpg); 
background-sizce: cover; */ 
background-color: #F6F6F6; 
} 

.logo { 
padding-top:3%; 
} 

footer { 
font-family:"Proxima"; 
clear: both; 
color: black; 
font-size: 100%; 
margin-top: 5%; 
margin-right: 5%; 
margin-left: 5%; 
text-align: center; 

} 

li a img { 
padding-top: 3%; 
} 

@font-face { 
font-family: Proxima; 
src: url(Fonts/Proxima_Regular.otf); 
} 
img.logo { max-width: 100%; 

}

出典

2016-04-18 Matic Toni

これは、最適化されたが、代わりに変更を容易にするために編成されていないことに注意してください。この

background-image: url("background.jpg"); 
background-attachment: fixed; 
background-size: 100%; 
background-repeat: no-repeat; 
overflow: hidden;

の線に沿って何かを試してみてください。

出典

2016-04-18 19:59:51 Jon

.bgimage{ 
 
\t background: url(http://images.coolestwallpapers.com/user-content/uploads/wall/1280x854/36/091c7f2accfa32c8a9d912928a0220193e962075.jpg) no-repeat center; 
 
\t width: 100vw; 
 
\t height: 100vh; 
 
\t background-size: 100% 100%; 
 
}

<div class="bgimage"> 
 
\t 
 
</div>

高さと幅が必要な設計に依存しています。

出典

2016-04-18 19:59:59

あなたのコードにはフッタがあるので、画像は実際には100％の高さにはなりません。

しかし、私はフレックスと正方形のボックスを設定するために、垂直パディングのいくつかの使用、あなたが行うことができますいろいろ書い近い

アイデアは、最大の高さと、そのようなバックグラウンド含んなどの最大幅と画像であると信じていますウィンドウの比率にかかわらず、コンテナの高さ/幅より大きくならないイメージを得るために、サイズを変更する必要があります。

例

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.logo { 
 
    width: 80vh;/* tune this , you may use calc() too */ 
 
    max-width: 80%;/* tune this */ 
 
    background: gray; 
 
    margin: auto; 
 
    position: relative; 
 
} 
 
.logo:before { 
 
    content: ''; 
 
    display: block; 
 
    padding-top: 100%;/* makes a square, */ 
 
} 
 
.logo a { 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    position: absolute; 
 
} 
 
.logo a img { 
 
    width: 100%;/* or height, it's a square one value is enough */ 
 
} 
 
footer { 
 
    text-align: center; 
 
    background: tomato; 
 
}

<div class="logo"> 
 
    <a href="projects.html" class="transition"> 
 
    <img src="http://dummyimage.com/200x200&[email protected]" alt="square" /><!--square of any size--> 
 
    </a> 
 
</div> 
 
<footer>copyright 2016 matic toni</footer>

私は誤解ならば、それははるかに背景サイズのようになります：含まれています。他の設定方法もありますが、画像タグをHTML内に保持する絶対位置付け

出典

2016-04-18 21:05:46

スクエア画像を画面全体に合わせてスクロールさせないにはどうしたらいいですか？

答えて

関連する問題