如何使背景图片“响应于img”？

Question

I was wondering how can I make my background image using bootstrap 'img-responsive'? 我想知道如何使用引导程序“ img响应”制作背景图像？ The background image is with in hero div 背景图片在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>

Answer 1

Use background-size: cover 使用background-size: cover

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

cover - A keyword that is the inverse of contain. cover-与contains相反的关键字。 Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). 尽可能缩放图像并保持图像长宽比（图像不会被压缩）。 The image "covers" the entire width or height of the container. 该图像“覆盖”了容器的整个宽度或高度。 When the image and container have different dimensions, the image is clipped either left/right or top/bottom. 当图像和容器的尺寸不同时，图像将被左右剪切或上下剪切。

Alternatively you might try contain depending on your desired behavior, but from the looks of your portfolio, cover is what you want 或者，您可以根据自己的期望行为尝试contain ，但是从投资组合的外观来看， cover就是您想要的

contain : A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). contains ：一个关键字，可将图像尽可能地缩放并保持图像的宽高比（图像不会被压缩）。 Image is letterboxed within the container. 图像在容器中带有信箱。 When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color. 当图像和容器的尺寸不同时，空白区域（左侧/右侧的顶部/底部）将填充背景色。

* edit - also added background-position: center center; background-repeat: no-repeat; *编辑-还添加了background-position: center center; background-repeat: no-repeat; background-position: center center; background-repeat: no-repeat; in the shorthand background property for .hero since from the looks of your portfolio, you want those. 在.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>

Answer 2

You can try 你可以试试

<div>
    <img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
</div>

Source: Make an image responsive - simplest way 来源：使图像具有响应性-最简单的方法

Answer 3

I personally use Jquery's Backstretch. 我个人使用Jquery的Backstretch。 The code is responsive and easy to plug in by using: 该代码具有响应性，可以通过以下方式轻松插入：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

And then adding the style/image to a .css doc like so: 然后像这样将样式/图像添加到.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>

EDIT!! 编辑！！ - I posted a link to Jquery but not the actual responsive backstretch plugin. -我发布了指向Jquery的链接，但未发布实际的响应式backstretch插件。 Note you must keep the required script above and then add backstretch following it since it is a dependency. 请注意，由于它是一个依赖项，因此必须在上面保留所需的脚本，然后在其后添加backstretch。 Download The Backstretch Plugin Here 在此处下载Backstretch插件

You would then add the script as follows: 然后，您将添加脚本，如下所示：

<script src="example.com/relative-Path/jquery.backstretch.min.js"></script>

如何使背景图片“响应于img”？

问题描述

3 个解决方案

解决方案1
3 已采纳 2017-03-21 00:28:24

解决方案2
0 2017-03-21 00:30:36

解决方案3
0 2017-03-21 00:37:09

如何使背景图片“响应于img”？

问题描述

3 个解决方案

解决方案1 3 已采纳 2017-03-21 00:28:24

解决方案2 0 2017-03-21 00:30:36

解决方案3 0 2017-03-21 00:37:09

解决方案1
3 已采纳 2017-03-21 00:28:24

解决方案2
0 2017-03-21 00:30:36

解决方案3
0 2017-03-21 00:37:09