使图像填充div完全没有拉伸

我有一些不同尺寸的大图像，需要在两个维度上完全填充240px * 300px的容器。这是我现在得到的，它只适用于一维:

http://jsfiddle.net/HsE6H/

HTML

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div

CSS

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
max-width: 100%;
height: auto;
}

比例应该保持不变。从本质上讲，宽图像应该在宽度上被截断，而高图像需要在高度上被截断。所以只要放大到需要填满的范围就可以了。

不知道为什么我不能让它工作，我需要JavaScript吗?

编辑:澄清一下。我要小提琴上所有红色的东西都消失。传入的图像是动态的，因此我不能使用背景图像。我愿意使用JavaScript。谢谢!:)

自动调整图像大小以适应div -使CSS工作

这里有一种方法，从下面的HTML开始:

<div class="container portrait">
    <h4>Portrait Style</h4>
    <img src="http://placekitten.com/150/300">
</div>

和CSS:

.container {
    height: 300px;
    width: 240px;
    background-color: red;
    float: left;
    overflow: hidden;
    margin: 20px;
}
.container img {
    display: block;
}
.portrait img {
    width: 100%;
}
.landscape img {
    height: 100%;
}

和演示提琴:http://jsfiddle.net/audetwebdesign/QEpJH/

当你有一个面向肖像的图像时，你需要将宽度缩放到100%。相反，当图像是横向的，你需要缩放高度。

不幸的是，在CSS中没有选择器组合来针对图像的长宽比，所以你不能使用CSS来选择正确的缩放。

此外，由于图像的左上角固定在包含块的左上角，因此您无法轻松地将图像居中。

jQuery助手

您可以使用以下jQuery操作来确定要基于哪个类进行设置关于图像的宽高比。

$(".container").each(function(){
    // Uncomment the following if you need to make this dynamic
    //var refH = $(this).height();
    //var refW = $(this).width();
    //var refRatio = refW/refH;
    // Hard coded value...
    var refRatio = 240/300;
    var imgH = $(this).children("img").height();
    var imgW = $(this).children("img").width();
    if ( (imgW/imgH) < refRatio ) { 
        $(this).addClass("portrait");
    } else {
        $(this).addClass("landscape");
    }
})

对于.container中的每个图像，获取高度和宽度，测试width<height，然后设置相应的类。

另外，我添加了一个检查来考虑包含块的长宽比。在此之前，我隐式地假设了一个方形视图面板。

对于没有动态图像的人来说，这里有一个使用background-image的全css解决方案。

<div class="container" 
    style="background-image: url('http://placehold.it/300x1500'); 
    background-size: cover; background-position: center;">
</div>
<div class="container" 
    style="background-image: url('http://placehold.it/1500x300'); 
    background-size: cover; background-position: center;">
</div>

"background-size: cover"使图像在保持宽高比的情况下覆盖所有div。CSS也可以移动到CSS文件中。如果是动态生成的，则background-image属性必须保留在style属性中。

在你的CSS文件中去掉line: max-width:100%似乎可以达到目的。

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
height: auto;
}

也可以在HTML文件的结束div中添加>，这样可以使代码更整洁。

<div class="container">
    <img src="http://placehold.it/300x1500">
</div>
<div class="container">
    <img src="http://placehold.it/1500x300">
</div>

这是一个工作的JSFiddle链接:http://jsfiddle.net/HsE6H/19/

这是我发现的另一个解决方案，不需要将肖像或风景或脚本分开。

  <div class="container">
    <img src="http://placehold.it/500x500" class="pic" />
  </div>

CSS

.container{
  position: relative;
  width: 500px;
  height: 300px;
  margin-top: 30px;
  background: #4477bb;
}
.pic{
    max-width: 100%;
    width: auto;
    max-height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

在这里，它运行良好…

https://jsfiddle.net/efirat/17bopn2q/2/

Background可以这样做

设置图片为背景

2。

div {
   -webkit-background-size: auto 100%;
   -moz-background-size: auto 100%;
   -o-background-size: auto 100%;
   background-size: auto 100%;
}

或

div {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

你应该试试这个:

img {
    min-width:100%;
    min-height:100%;
}

我使用这个插件，说明任何比率。它还需要imagesloaded插件才能工作。这对于需要这种处理的站点上的大量图像非常有用。也很容易启动

https://github.com/johnpolacek/imagefill.js/

如果你为img样式添加以下内容，它会工作;https://jsfiddle.net/yrrncees/10/

.container img {
position: relative;
vertical-align: middle;
top: 50%;
-webkit-transform: translateY(-50%);
min-height: 100%;
min-width: 100%;
object-fit:cover;
}

可以这样做:

.container {
    float: left;
    height: 300px;
    width: 240px;
    background-color: red;
    margin: 20px;
}
img {
    width:240px;
    height:300px;
}

我们在Angular应用中使用了上述jQuery方法的变体。然后我们的一个聪明的同事想出了一个纯CSS的方法。请看下面的例子:https://jsfiddle.net/jeffturner/yrrncees/1/.

基本上使用行高解决了我们的问题。对于那些不想动手的人，代码片段如下:

.container {
    margin: 10px;
    width: 125px;
    height: 125px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}
.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

我遇到这个话题是因为我试图解决一个类似的问题。然后我脑子里灵光一闪，我简直不敢相信它居然有效，因为它是如此简单和如此明显。

CSS

.container {
height: 300px;
width: 240px;
background-color: red;
float: left;
overflow: hidden;
margin: 20px;
}
img {
min-width:100%;
min-height:100%;
}

只要将最小宽度和最小高度设置为100%，它就会自动调整大小以适合div，切断多余的图像。不乱不闹

使用图片作为div背景有很多缺点(比如搜索引擎优化缺少ALT)。而不是它，使用object-fit: cover;在图像标签样式!

如果您需要在div标签中插入img标签，下面的解决方案非常简洁:

.container, .container img 
{
	max-height: 300px;
	max-width: 240px;
}

Try to open every image into another page you will notice that originals are all different sized but none is streched, just zoomed:
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://cdn.pixabay.com/photo/2011/03/22/22/25/winter-5701_960_720.jpg" /></div>
<p></p>
<div class="container"><img src="https://cdn.arstechnica.net/wp-content/uploads/2009/11/Screenshot-gnome-shell-overview.png" /></div>
<p></p>
<div class="container"><img src="http://i.imgur.com/OwFSTIw.png" /></div>
<p></p>
<div class="container"><img src="https://www.gentoo.org/assets/img/screenshots/surface.png" /></div>
<p></p>
<div class="container"><img src="https://freebsd.kde.org/img/screenshots/uk_maximignatenko_kde420-1.png" /></div>
<p></p>
<div class="container"><img src="https://i.ytimg.com/vi/9mrOgkYje0s/maxresdefault.jpg" /></div>
<p></p>
<div class="container"><img src="https://upload.wikimedia.org/wikipedia/commons/5/59/Linux_screenshot.jpg" /></div>
<p></p>

同样，如果你不需要使用div，你可以写一个更短的css:

 img
    {
        max-height: 300px;
        max-width: 240px;
    }

相关内容

最新更新

热门标签：