CSS 仅在较大时才将图像缩放到父 div,同时使用显式最大宽度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18113056/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 23:52:27  来源:igfitidea点击:

Make images scale to parent div only when larger, all while using an explicit max-width

cssresponsive-design

提问by Chris Redford

I can make an image scale responsively to a parent div on smaller screens but still limit to an explicit max width:

我可以在较小的屏幕上响应父 div 的图像缩放,但仍然限制为明确的最大宽度:

img {
    max-width: 500px;
    width: 100%;
}

However, if the image is smaller than the parent div, it is still stretched to fill the div.

但是,如果图像小于父 div,它仍然会被拉伸以填充 div。

Is there a way to have it scale to 100% only when it is larger and maintain its original dimensions when it is smaller, without knowing the image's dimensions beforehand?

有没有办法让它只有在它变大时才缩放到 100% 并在它变小时保持其原始尺寸,而无需事先知道图像的尺寸?

回答by jerrylow

You can set the image's max-width: 100%; which would limit its size only if it's bigger than its parent.

您可以设置图像的最大宽度:100%;只有当它大于它的父级时,它才会限制它的大小。

img {
    height: auto;
    max-width: 100%;
}

Demo here: http://jsfiddle.net/LMEwC/

演示在这里:http: //jsfiddle.net/LMEwC/

回答by Manfred

In case you are using Bootstrap (version 3.x, perhaps other versions as well) you can also use

如果您使用的是 Bootstrap(版本 3.x,也可能是其他版本),您还可以使用

class='img-responsive'

on your <img>tag to resize it to the parent element's size.

在您的<img>标签上将其调整为父元素的大小。

回答by Simone Conti

You can put the image inside a div and apply these styles:

您可以将图像放在 div 中并应用以下样式:

<div><img></div>

div{max-width: 500px}
img{max-width: 100%}

example on jsFiddle

jsFiddle上的例子

回答by Christopher Marshall

Add a min-widthto the css.

向 css添加一个最小宽度

img {
    width:100%;
    min-width:50px;
}

回答by Molle

Use JavaScript to find the respective width/height of picture and div and then resize the image to the fit the div.

使用 JavaScript 找到图片和 div 的相应宽度/高度,然后调整图像大小以适合 div。

You can use this code to find the height, create this function.

您可以使用此代码查找高度,创建此函数。

function getHeight(id)
{
return document.getElementById("id").offsetHeight; // Change to .offsetWidth to gain width :)
}

call the function like this:

像这样调用函数:

function resize()
{
var imgHeight = getHeight("img");
var divHeight = getHeight("div");

//Then ask:

    if(imgHeight > divHeight)
    {
    pic = document.getElementById("img");
    pic.style.height = divHeight;
    }
}

Now you need some action to call the functions, might work? or some onclick event? Depends on how you are using this image.

现在你需要一些动作来调用函数,可能会起作用吗?或者一些onclick事件?取决于您如何使用此图像。

I hope this helps. It SHOULD do the job.

我希望这有帮助。它应该完成这项工作。

NB: It has come to my attention that used with spesific types of elements Google Chrome simply ignores max/min-width, when width is present (CSS)! But not always.

注意:我注意到,当存在宽度 (CSS) 时,与特定类型的元素一起使用时,Google Chrome 浏览器会简单地忽略最大/最小宽度!但不总是。