<img>不会像我期望的min-width:100%
我正在尝试缩小<img>，直到高度或宽度与容器匹配
点击<iframe>中的任意位置以切换容器形状
请尝试编辑
<img>CSS：1）维持宽高比
2）封闭容器DIV的整个表面区域
3）仅编辑图像
这种中心方法看起来很有草图，但它非常强大
我的问题具体是：即使父<img>调整大小
<div>缩放为父级<div>的FILL（保持宽高比但涵盖整个表面）
也许我可以以某种方式使用css flex box-layout或其他东西？也许是变换？
将HTML源设置为透明base64像素（credit CSS Tricks）
<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
使用CSS背景属性
#img {
width: 100%;
height: 100%;
background: url(http://i.imgur.com/0BBsCUB.gif) no-repeat center;
background-size: cover;
}
答案 0 :(得分：8)
如果您不想触摸容器，请将背景放在java -cp .;C:\ListenerZipfile\lib\*.jar com.sigma.main.ListenerZipFile
<img>答案 1 :(得分：7)
http://jsfiddle.net/Log82brL/7/
#img {
width: 100%;
height: 100%;
object-fit: cover;
}
对象适合：封面允许替换内容的大小在填充元素的整个内容框时保持其宽高比：其具体对象大小被解析为对元素使用的宽度和高度的封面约束。
答案 2 :(得分：3)
您可以使用CSS background代替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>
这是JS Fiddle Demo
尝试更改height和width - 您会看到图片延伸以填充div。
您还可以使用不同的background-size值：
比例拉伸包含：background-size: contain;
Too tall div
Too wide div
按比例拉伸填充：background-size: cover;
Too tall div
Too wide div
伸展以填充100％：background-size: 100% 100%;
Too tall div
Too wide div
答案 3 :(得分：3)
使用单个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>
答案 4 :(得分：1)
您是否尝试过引导程序解决方案
http://getbootstrap.com/css/#images-responsive
几乎是
.img-responsive
{
max-width: 100%;
height: auto;
display: block;
}
添加到您的更新问题
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);
}
我仍然不确定你寻求的是什么，对于生涩的动画感到抱歉。
答案 5 :(得分：1)
前段时间我发现了一个名为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;
}
答案 6 :(得分：1)
http://krasimirtsonev.com/blog/article/CSS-Challenge-1-expand-and-center-image-fill-div
包含AND居中
我认为这是你想要的渲染，这可能会有所帮助;）
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");
答案 7 :(得分：1)
更新了答案。现在按预期工作。
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>
答案 8 :(得分：0)
通常要达到你需要使用的目的：
parentdiv img {
width:100%;
height:auto;}
为了使您的图像使用父div重新调整大小。
如果将溢出设置为隐藏，则可能会导致一些裁剪问题（视觉上）。
答案 9 :(得分：0)
试试这个：
<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>
设置高度或使用自动不会使图像看起来拉伸。
答案 10 :(得分：0)
使用此类Bootstrap .img-responsive，如果父div更改，则将媒体查询添加到image和div
答案 11 :(得分：0)
这是一个非常简单的CSS解决方案，不需要更改img标记的属性。
div{
background-image: url("http://www.frikipedia.es/images/thumb/d/d5/Asdsa-asdas.jpg/300px-Asdsa-asdas.jpg");
height: auto;
width: 400px;
overflow: hidden;
background-size: cover;
background-position: center;
}
答案 12 :(得分：0)
你可以使用imgLiquid https://github.com/karacas/imgLiquid
$(function() {
$(".imgLiquidFill").imgLiquid({
fill: true,
horizontalAlign: "center",
verticalAlign: "top"
});
$(".imgLiquidNoFill").imgLiquid({
fill: false,
horizontalAlign: "center",
verticalAlign: "50%"
});
});.boxSep{
background-color:#f7f7f7;
border: 2px solid #ccc;
margin:10px;
display:inline-block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgithub.com/karacas/imgLiquid/master/js/imgLiquid-min.js"></script>
<div class="boxSep" >
<div class="imgLiquidFill imgLiquid" style="width:250px; height:250px;">
<img alt="" src="http://www.juegostoystory.net/files/image/2010_Toy_Story_3_USLC12_Woody.jpg"/>
</div>
</div>
<div class="boxSep" >
<div class="imgLiquidNoFill imgLiquid" style="width:250px; height:250px;">
<img alt="" src="http://www.juegostoystory.net/files/image/2010_Toy_Story_3_USLC12_Woody.jpg"/>
</div>
</div>