使用css调整图像大小 [英] resize image using css
问题描述
我试图使用css只调整图像大小。
I am trying to resize image using css only.
它正在调整大小,但由于某种原因,它不伸展到浏览器的100%。我想要的是它将调整给定高度的图像,但是宽度应该在整个浏览器中为100%。
It is resizing but for some reason it is not stretching to 100% of the browser.What I want is it will resize the image with given height but width should be 100% throughout the browser.
我创建了一个作为演示的小提琴,以便您可以看到发生了什么。 / p>
I have created a fiddle as demo so that you can see what's going on.
<div class="resize_image">
<img src="http://www.mrwallpaper.com/wallpapers/sunset-scenery.jpg">
</div>
全屏 http://jsfiddle.net/squidraj/sbnvwped/embedded/result/
演示: http://jsfiddle.net/squidraj/sbnvwped/
推荐答案
您可以通过将img标签设置为100%的宽度和高度,并将其放在一个容器div和调整大小来调整它的大小。 演示
You can resize it by setting the img tag to 100% width and height and puting it in a container div and resizing that. Demo
<div id="resize">
<img src="http://coolvectors.com/images/vect/2009/07/500x500.jpg" width="100%" height="100%"></div>
#resize{
width:250px;
height:250px;
}
#resize:hover {
width:500px;
height:500px;}
这篇关于使用css调整图像大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!