javascript CSS：如何缩放 <img> 以覆盖整个父 <div>？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31176592/
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
CSS: How to scale an <img> to cover entire parent <div>?
提问by neaumusic
QUESTION:
问题：
The <img>isn't shrink wrapping as I would expect with min-width:100%
在<img>不收缩包装，因为我将与期望min-width:100%
I'm trying to shrink the <img>until either height or width matches the container
我试图缩小 <img>直到高度或宽度与容器匹配
Click anywhere in the <iframe>to toggle container shapes
单击 中的任意位置<iframe>以切换容器形状
Please try to edit the
<img>CSS:1) MAINTAIN ASPECT RATIO
2) COVER ENTIRE SURFACE AREA OF CONTAINER DIV
3) ONLY EDIT THE IMAGE
请尝试编辑
<img>CSS：1) 保持纵横比
2) 覆盖集装箱 DIV 的整个表面区域
3)只编辑图像
This centering approach looks kinda sketch but it's pretty robust
这种居中方法看起来有点草图，但它非常强大
My question is specifically: scale an <img>to FILL (maintain aspect ratio but cover the entire surface) of parent <div>even as the parent <div>resizes
我的问题特别是：即使父级调整大小，也可以将父级缩放<img>到 FILL（保持纵横比但覆盖整个表面）<div><div>
Maybe I could somehow use css flex box-layout or something? Maybe a transform?
也许我可以以某种方式使用 css flex box-layout 之类的？也许是转型？
ANSWER:
答案：
Set HTML source to transparent base64 pixel (credit CSS Tricks)
将 HTML 源设置为透明 base64 像素（信用CSS 技巧）
<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
Use CSS background property
使用 CSS 背景属性
#img {
width: 100%;
height: 100%;
background: url(http://i.imgur.com/0BBsCUB.gif) no-repeat center;
background-size: cover;
}
采纳答案by Rakesh Sadhula
If you don't want to touch the container, put the background on the <img>
如果您不想触摸容器，请将背景放在 <img>
#img
{
background: url(imgpath) no-repeat center;
background-size: cover;
}
回答by 2ne
http://jsfiddle.net/Log82brL/7/
http://jsfiddle.net/Log82brL/7/
#img {
width: 100%;
height: 100%;
object-fit: cover;
}
object-fit: cover allows the replaced content is sized to maintain its aspect ratio while filling the element's entire content box: its concrete object size is resolved as a cover constraint against the element's used width and height.
object-fit:cover 允许被替换的内容调整大小以保持其纵横比，同时填充元素的整个内容框：它的具体对象大小被解析为对元素使用的宽度和高度的覆盖约束。
回答by Yeldar Kurmangaliyev
You can use CSS backgroundinstead of HTML img.
您可以使用 CSSbackground而不是 HTML img。
.myDiv
{
height: 400px;
width: 300px;
background-image: url('image-url.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
border: 1px solid #000000;
}
<div class="myDiv">
</div>
Here is the JS Fiddle Demo.
Try to change heightand width- you will see that image stretches to fill the div.
这是JS Fiddle 演示。
尝试更改height并且width- 您将看到图像拉伸以填充div.
You can also different background-sizevalues:
您还可以使用不同的background-size值：
Proportional stretch to contain:
background-size: contain;
Too tall div
Too wide divProportional stretch to fill:
background-size: cover;
Too tall div
Too wide divStretch to fill 100%:
background-size: 100% 100%;
Too tall div
Too wide div
回答by Akhilesh Kumar
use single css background shorthand property
使用单个 css 背景速记属性
.myDiv
{
height: 400px;/*whatever you want*/
width: 300px;/*whatever you want*/
background: url('image-url.png') no-repeat center center;
background-size: contain;
}
<div class="myDiv">
</div>
回答by Riddler
Did u try the bootstrap solution
您是否尝试过引导程序解决方案
http://getbootstrap.com/css/#images-responsive
http://getbootstrap.com/css/#images-responsive
which is pretty much
这几乎是
.img-responsive
{
max-width: 100%;
height: auto;
display: block;
}
Adding to your update question
添加到您的更新问题
http://jsfiddle.net/arunzo/Log82brL/5/
http://jsfiddle.net/arunzo/Log82brL/5/
.skinny>img
{
max-width:none !important;
min-height:none !important;
max-height:100%;
-webkit-transform:translate3d(+50%, +50%, 0);
}
And still i am unsure what is that you seek, sorry for the jerky animation.
而且我仍然不确定您要寻找什么，对于生涩的动画感到抱歉。
回答by IMI
Updated answer. Now works as intended.
更新了答案。现在按预期工作。
var toggle = false,
containerElement = document.querySelector("#container");
window.onclick = function () {
containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");#container {
overflow: hidden;
width: 400px;
height: 200px;
transition: all .5s;
margin: 0 auto; /* this is just for demonstration purposes */
}
#container.skinny {
width: 200px;
height:600px;
}
#img {
height: auto;
left: 50%;
margin: auto;
min-height: 100%;
position: relative;
top: 50%;
transform: translate(-50%, -50%); /* changed to 2d translate */
width: 100%; /* full width in wide mode */
}
#container.skinny #img {
width: auto; /* width reset in tall mode */
}<div id="container">
<img id="img" src="http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg" />
</div>回答by berto
A while back I found a jQuery solution called backstretch. Now this looks possible with CSS3; from the linked page:
不久前，我发现了一个名为backstretch的 jQuery 解决方案。现在这看起来可以用 CSS3 实现；从链接页面：
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
回答by Fundhor
http://krasimirtsonev.com/blog/article/CSS-Challenge-1-expand-and-center-image-fill-div
http://krasimirtsonev.com/blog/article/CSS-Challenge-1-expand-and-center-image-fill-div
contained AND centered
包含和居中
I think this is the rendering you're trying to get, this might help ;)
我认为这是您想要获得的渲染，这可能会有所帮助；)
https://jsfiddle.net/erq1otL4/
https://jsfiddle.net/erq1otL4/
<div id="container" style="background-image: url(http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg);"></div>
#container.skinny {
width: 400px;
height:600px;
}
#container {
width: 400px;
height: 200px;
overflow: hidden;
background-size: cover;
background-color:pink;
background-position: center center;
}
var toggle = false,
containerElement = document.querySelector("#container");
window.onclick = function () {
containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");
回答by dianne_ldrs
Try this:
试试这个：
<div class="img_container">
<img src="image/yourimage.jpg" alt="" />
</div>
<style type="text/css">
.img_container{
width: 400px;
height: 400px;
overflow: hidden;
}
.img_container img{
width: 100%;
height: auto;
}
</style>
setting the height or the with auto will not make the image look stretched.
设置高度或使用自动不会使图像看起来被拉伸。
回答by Shashank
Use this class of Bootstrap .img-responsive and if parent div changes add media Queries to image and div both
使用此类 Bootstrap .img-responsive，如果父 div 更改，则将媒体查询添加到图像和 div 中
