Html Bootstrap 4 容器内的全角图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38972305/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full-width image inside container in Bootstrap 4
提问by Jamgreen
I am using Bootstrap 4 and I have a template layout with
我正在使用 Bootstrap 4 并且我有一个模板布局
<div class="navbar">
...
</div>
<div class="container">
{{content}}
</div>
This works in almost all cases. However, sometimes I want an image in the content to take up the full width, but this is not possible due to the .containerwhich uses left-paddingand right-padding.
这几乎适用于所有情况。但是，有时我希望内容中的图像占据整个宽度，但由于.containerwhich 使用left-padding和，这是不可能的right-padding。
I could solve this by adding the .containerclass in each view at the right places instead of in my template layout file, but this will become quite annoying. Especially if I have a CMS where different authors can write articles, and if they want a full-width image in the middle of their article, they have to write raw html to be something like
我可以通过.container在每个视图中的正确位置而不是在我的模板布局文件中添加类来解决这个问题，但这会变得很烦人。特别是如果我有一个 CMS，不同的作者可以在其中撰写文章，并且如果他们想要在文章中间放置全角图像，则他们必须编写原始 html 类似于
<div class="container">
some text
</div>
<div class="full-width-image">
<img src="" alt="">
</div>
<div class="container">
more text
</div>
..
How could I solve this problem?
我怎么能解决这个问题？
回答by ondrejruzicka
you can use vwunits with negative margin. And it's responsive friendly.
您可以使用vw负边距的单位。它响应友好。
.full-width-image {
width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw;
}
.full-width-image img {
width: 100%;
}
See my fiddle: https://jsfiddle.net/ondrejruzicka/07y0o746/
回答by Bhojendra Rauniyar
In bootstrap 4, you can apply img-fluidclass:
在bootstrap 4 中，您可以应用img-fluid类：
<img class="img-fluid w-100" src="path.jpg" />
Here w-100class is applied to ensure smaller images to fit to it's container.
这里w-100应用了类来确保较小的图像适合它的容器。
For those who are using bootstrap 3: Just apply img-responsiveinstead of img-fluid.
对于那些使用bootstrap 3 的人：只需 applyimg-responsive而不是img-fluid.
回答by 4dinand
As a simple solution that doesn't require any css, you can use a px-0 spacing utility to set the image to full width.
作为不需要任何 css 的简单解决方案，您可以使用 px-0 间距实用程序将图像设置为全宽。
<!-- FULL-WIDTH IMAGE -->
<div class="container-fluid">
<div class="row">
<div class="col-12 px-0">
<img class="img-fluid" src="your-image">
</div>
</div>
</div>
<!-- 12 COLUMN IMAGE -->
<div class="container-fluid">
<div class="row">
<div class="col-12">
<img class="img-fluid" src="your-image">
</div>
</div>
</div>
see this code pen:
看到这个代码笔：
看笔 full width image费迪南德·胡贝尔的全宽图像（@fdhu@fdhu) 上CodePen代码笔。more about spacing utilities: https://getbootstrap.com/docs/4.1/utilities/spacing/
有关间距实用程序的更多信息：https: //getbootstrap.com/docs/4.1/utilities/spacing/
回答by Chain Trap
I just have the feeling that this one could help you. What I did was make the image as the background to the <div>itself and set the specified height to have the image visible since there are no contents inside.
我只是觉得这个可以帮助你。我所做的是将图像作为<div>自身的背景，并设置指定的高度以使图像可见，因为里面没有内容。
CSS
CSS
.full-width-image {
height: 300px; // your specified height
background: url("your-image.jpg") no-repeat center center fixed;
background-size: cover;
}
Plus to have it the left and right padding to align with your other contents add the class .container.
加上它的左右填充与您的其他内容对齐添加类.container。
HTML
HTML
<div class="container full-width-image"></div>
Here's a sample demoof it.
这是它的示例演示。
回答by Martin Loeffler
Use the container-fluidclass instead of containerto bring the background image to responsive full width.
使用container-fluid该类而不是container将背景图像设置为响应式全宽。
Example html:
示例 html：
<div class="container-fluid">
<div class="row image1">
</div>
</div>
Example CSS:
示例 CSS：
.image1{
background-image:url("path_to_image.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 400px;
min-width: 100%;}
回答by eoin
If you know the paddingof div.containeryou could set a negative marginof the same amount on your image class.
如果你知道padding的div.container，你可以设置一个负margin的图像类等量的。
HTML:
HTML：
<div class="container">
<img class="full-width-image" src="whatever.jpg" />
</div>
CSS:
CSS：
.container {
padding: 10px;
}
.full-width-image {
margin: -10px;
}
Alternatively, and probably more correctly, you could remove the paddingfrom div.containerentirely and only add it to the elements within it that need it.
或者，可能更正确的是，您可以完全删除paddingfromdiv.container并仅将其添加到其中需要它的元素中。
回答by Ilya Kushlianski
The key is to use the negative margin. But with Bootstrap it's harder to get the exact margin each time because of several breakpoints and different devices.
关键是使用负边距。但是使用 Bootstrap 时，由于存在多个断点和不同的设备，每次都很难获得准确的余量。
This is the Javascript you can add. What it does is actually wraps all your images into a figure with the class "image-centered" and compares the initial width of the image (must be set as an HTML attribute) with the width it has to take due to screen constraints.If the initial image width is higher than the screen constraints, the image inside your articles will be full-screen. Otherwise it will be centered.
这是您可以添加的 Javascript。它所做的实际上是将所有图像包装成一个带有“以图像为中心”类的图形，并将图像的初始宽度（必须设置为 HTML 属性）与由于屏幕限制而必须采用的宽度进行比较。如果初始图像宽度高于屏幕限制，则文章中的图像将是全屏的。否则会居中。
$(document).ready(function(){
$("img").wrap("<figure class='image-centered'></figure>");
$("figure.image-centered").each(function(){
if ($(this).children("img").attr("width") > $(this).children("img").width()){
var containerMargins = $(".container").css("marginRight").replace(/[^-\d\.]/g, '');
var containerPadding = $(".container").css("paddingRight").replace(/[^-\d\.]/g, '');
var calc = $(".container").width() + (Number(containerMargins) + Number(containerPadding))*2;
$(this).css({"maxWidth": `${calc}px`, "margin": `1em -${Number(containerMargins) + Number(containerPadding)}px`});
}
});
});
And CSS:
和 CSS：
img {
height: auto; /* Make sure images are scaled correctly. */
max-width: 100%; /* Adhere to container width. */
margin: 0 auto;
display: block;
}
figure {
margin: 1em 0;
}
figure.image-centered {
margin-left: auto;
margin-right: auto;
}
