[英]How can I make my background image 'img-responsive'?
我想知道如何使用引導程序“ img響應”制作背景圖像？ 背景圖片在hero div中帶有
<!DOCTYPE html> <html> <head> <html lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Liam Docherty Digital Portfolio</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <style> body { margin: 0; padding: 0; } .navbar.navbar-default { background-color: #4D5061; height: 10vh; z-index: 100; } .navbar.navbar-default ul { list-style-type: none; text-align: right; } .navbar.navbar-default ul li { display: inline-block; } .dropdown-menu li { text-align: center } .dropdown .dropdown-menu { background-color: #4D5061; } .dropdown .dropdown-menu a { color: white; } .navbar.navbar-default ul li a { display: inline-block; padding: 3.5vh 8px 4px; color: white; text-decoration: none; font-size: 14pt; font-family: 'Roboto', sans-serif; } .navbar.navbar-default ul li:after { content: ''; position: absolute; right: 50%; bottom: 0; left: 50%; height: 3px; background-color: #FFFFFF; border-radius: 9px; transition: all .2s; } .navbar.navbar-default ul li a:hover { color: white; } .nav.navbar-nav, .nav.navbar-nav>li { float: none; } .navbar.navbar-default ul li:hover:after { right: 0; left: 0; } .nav-title { font-size: 14pt; margin: 0; top: 35px; left: 50px; width: 100%; position: absolute; text-align: center; color: white; font-family: 'Roboto', sans-serif; } .navbar.navbar-default ul.dropdown-menu li, .navbar.navbar-default ul.dropdown-menu li a { position: relative; display: block; } #logo { padding-top: 2vh; padding-left: 20px; float: left; } .hero { background-image: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg"); background-attachment: fixed; position: relative; text-align: center; width: 100%; max-width: 100%; width: 100vw; height: 100%; } section { position: relative; height: 95vh; } .section1 { height: 100vh; text-align: center; color: white; } .section2 { background-color: #11B5E4; text-align: center; color: white; } .section3 { background-color: #FFFFFF; text-align: center; color: white; } .fa-angle-down { color: #4D5061; position: absolute; bottom: 0px; } .fa-angle-up { color: #4D5061; position: absolute; bottom: 0px; } .footer { height: 6vh; background-color: #4D5061; padding: 0; right: 0; bottom: 0; left: 0; } .footertext { font-size: 14pt; color: white; font-family: 'Roboto', sans-serif; text-align: center; } .profile.box { bottom: 0; height: 50%; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 50%; } .shape { border-radius: 25px; background: #4D5061; content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg); color: white; height: 250px; margin: auto; padding: 3px; width: 250px; } .shape2 { background: linear-gradient(35deg, #4D5061, #4D5061); border-radius: 85px; color: white; height: 40px; margin: 1% auto; opacity: 0.9; padding: 0px; width: 250px; } </style> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a> <h1 class="nav-title">Liam Docherty's Digital Portfolio</h1> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Home</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#section3">Contact</a> </li> <li><a href="#">Something else here</a> </li> <li><a href="#">Separated link</a> </li> <li><a href="#">One more separated link</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li><a href="#">Separated link</a> </li> <li><a href="#">One more separated link</a> </li> </ul> </li> <li><a href="#">Clients</a> </li> <li><a href="#contact-me">Contact Me</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <section id="section1" class="section1"> <div class="hero"> <div class="profile box"> <div class="shape"></div> <div class="shape2"> <p>kjjjjjjjjjkjjjkkjkj</p> </div> </div> </div> <a href="#section2"><i class="fa fa-angle-down" style="font-size:100px;"></i></a> </section> </html>
使用background-size: cover
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
cover-與contains相反的關鍵字。 盡可能縮放圖像並保持圖像長寬比（圖像不會被壓縮）。 該圖像“覆蓋”了容器的整個寬度或高度。 當圖像和容器的尺寸不同時，圖像將被左右剪切或上下剪切。
或者，您可以根據自己的期望行為嘗試contain ，但是從投資組合的外觀來看， cover就是您想要的
contains ：一個關鍵字，可將圖像盡可能地縮放並保持圖像的寬高比（圖像不會被壓縮）。 圖像在容器中帶有信箱。 當圖像和容器的尺寸不同時，空白區域（左側/右側的頂部/底部）將填充背景色。
*編輯-還添加了background-position: center center; background-repeat: no-repeat; background-position: center center; background-repeat: no-repeat; 在.hero的簡寫background屬性中，因為從投資組合的外觀來看，您需要這些。
<!DOCTYPE html> <html> <head> <html lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Liam Docherty Digital Portfolio</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <style> body { margin: 0; padding: 0; } .navbar.navbar-default { background-color: #4D5061; height: 10vh; z-index: 100; } .navbar.navbar-default ul { list-style-type: none; text-align: right; } .navbar.navbar-default ul li { display: inline-block; } .dropdown-menu li { text-align: center } .dropdown .dropdown-menu { background-color: #4D5061; } .dropdown .dropdown-menu a { color: white; } .navbar.navbar-default ul li a { display: inline-block; padding: 3.5vh 8px 4px; color: white; text-decoration: none; font-size: 14pt; font-family: 'Roboto', sans-serif; } .navbar.navbar-default ul li:after { content: ''; position: absolute; right: 50%; bottom: 0; left: 50%; height: 3px; background-color: #FFFFFF; border-radius: 9px; transition: all .2s; } .navbar.navbar-default ul li a:hover { color: white; } .nav.navbar-nav, .nav.navbar-nav>li { float: none; } .navbar.navbar-default ul li:hover:after { right: 0; left: 0; } .nav-title { font-size: 14pt; margin: 0; top: 35px; left: 50px; width: 100%; position: absolute; text-align: center; color: white; font-family: 'Roboto', sans-serif; } .navbar.navbar-default ul.dropdown-menu li, .navbar.navbar-default ul.dropdown-menu li a { position: relative; display: block; } #logo { padding-top: 2vh; padding-left: 20px; float: left; } .hero { background: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg") center center no-repeat;; background-attachment: fixed; position: relative; background-size: cover; text-align: center; width: 100%; max-width: 100%; width: 100vw; height: 100%; } section { position: relative; height: 95vh; } .section1 { height: 100vh; text-align: center; color: white; } .section2 { background-color: #11B5E4; text-align: center; color: white; } .section3 { background-color: #FFFFFF; text-align: center; color: white; } .fa-angle-down { color: #4D5061; position: absolute; bottom: 0px; } .fa-angle-up { color: #4D5061; position: absolute; bottom: 0px; } .footer { height: 6vh; background-color: #4D5061; padding: 0; right: 0; bottom: 0; left: 0; } .footertext { font-size: 14pt; color: white; font-family: 'Roboto', sans-serif; text-align: center; } .profile.box { bottom: 0; height: 50%; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 50%; } .shape { border-radius: 25px; background: #4D5061; content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg); color: white; height: 250px; margin: auto; padding: 3px; width: 250px; } .shape2 { background: linear-gradient(35deg, #4D5061, #4D5061); border-radius: 85px; color: white; height: 40px; margin: 1% auto; opacity: 0.9; padding: 0px; width: 250px; } </style> </head> <body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a> <h1 class="nav-title">Liam Docherty's Digital Portfolio</h1> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Home</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#section3">Contact</a> </li> <li><a href="#">Something else here</a> </li> <li><a href="#">Separated link</a> </li> <li><a href="#">One more separated link</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li> <li><a href="#">Separated link</a> </li> <li><a href="#">One more separated link</a> </li> </ul> </li> <li><a href="#">Clients</a> </li> <li><a href="#contact-me">Contact Me</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> <section id="section1" class="section1"> <div class="hero"> <div class="profile box"> <div class="shape"></div> <div class="shape2"> <p>kjjjjjjjjjkjjjkkjkj</p> </div> </div> </div> <a href="#section2"><i class="fa fa-angle-down" style="font-size:100px;"></i></a> </section> </html>
你可以試試
<div>
<img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
</div>
來源： 使圖像具有響應性-最簡單的方法
我個人使用Jquery的Backstretch。 該代碼具有響應性，可以通過以下方式輕松插入：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
然后像這樣將樣式/圖像添加到.css文檔中：
<style>
.content-wrapper {
/* This image will be displayed fullscreen */
background: url('http://site.rockbottomgolf.com/blog_images/Hole%2012%20-%20Imgur.jpg') no-repeat center fixed;
scroll-x /* Ensure the html element always takes up the full height of the browser window */ min-height: 100%;
/* The Magic */
background-size: cover;
}
</style>
編輯！！ -我發布了指向Jquery的鏈接，但未發布實際的響應式backstretch插件。 請注意，由於它是一個依賴項，因此必須在上面保留所需的腳本，然后在其后添加backstretch。 在此處下載Backstretch插件
然后，您將添加腳本，如下所示：
<script src="example.com/relative-Path/jquery.backstretch.min.js"></script>
如何使用bootstrap使我的網站響應？ img-responsive / columns not working
[英]How do I make my website responsive using bootstrap? img-responsive / columns not working
如何使容器占據整個行的高度，並在同一行中響應具有img響應的圖像進行縮放
[英]How do I make a container take up the full row height and scale responsively with img-responsive images in the same row
使用 css 顯示圖像的一部分，但使用 img-responsive
[英]Showing a portion of an image using css but having it responsive with img-responsive
我想調整大小 <div> 通過Bootstrap的“ img響應”調整圖像大小時的區域
[英]I'd like to resize <div> area while an image is resized by “img-responsive” of Bootstrap
各種尺寸和img響應的圖像-如何設置響應div？
[英]Images of various sizes and img-responsive - how to set a responsive div?
盡管有img-img響應，但圖像仍超出了Twitter Bootstrap中的父級。
[英]Image extends beyond the parent in Twitter Bootstrap in spite of `img-responsive`
有沒有辦法調整圖像響應的圖像的高度和寬度？
[英]Is there a way to adjust the height and width of an image that is img-responsive?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.