{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 不美不萌又怎样 的问题《CSS scale down image to fit in containing div, wit》','https://www.manongdao.com/q-258795.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I want to have a website where I can upload images of different sizes to be displayed in a jquery slider. I can't seem to fit (scaling down) the image in a containing div. Here's how I'm intending to do it
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Imtest.css"/>
</head>
<body>
<div id="wrapper">
<div id="im"><img src="Images/Scarpa2_1.jpg" /></div>
</div>
</body>
</html>
And the CSS
#wrapper {
width: 400px;
height: 400px;
border: 2px black solid;
margin: auto;
}
#im {
max-width: 100%;
}
I've tried to set the max-width of my image to 100% in CSS. But that doens't work.
It's very simple. Just Set width of img to 100%
if you want both width and the height you can try
but this wont distort the image but fill the div.
Hope this will answer the age old problem (Without using CSS background property)
Html
Css
Several of these things did not work for me... however, this did. Might help someone else in the future. Here is the CSS:
In a webpage where I wanted a in image to scale with browser size change and remain at the top, next to a fixed div, all I had to do was use a single CSS line:
overflow:hidden;and it did the trick. The image scales perfectly.What is especially nice is that this is pure css and will work even if Javascript is turned off.
CSS:
HTML:
I use:
object-fit: cover;
-o-object-fit: cover;
to place images in a container with a fixed height and width, this also works great for my sliders. It will however cut of parts of the image depending on it's.