使用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屋！