使用CSS调整图像大小

拉吉

我正在尝试仅使用CSS调整图像大小。

它正在调整大小,但由于某种原因,它无法扩展到浏览器的100%。我想要的是它将调整具有给定高度的图像的大小,但整个浏览器的宽度应为100%。

我创建了一个小提琴作为演示,以便您可以查看发生了什么。

<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中并调整其大小来调整其大小。演示版

<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;}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用CSS调整图像大小

来自分类Dev

使用CSS调整大小和裁剪图像

来自分类Dev

使用CSS调整图像的裁剪部分的大小

来自分类Dev

使用CSS Grid调整图像大小

来自分类Dev

使用PHP或CSS调整图像大小?

来自分类Dev

使用CSS动态调整图像大小

来自分类Dev

如何使用CSS调整图像大小以适合其容器

来自分类Dev

如何使用CSS调整HTML中的图像大小

来自分类Dev

使用CSS调整所有大图像的大小

来自分类Dev

使用CSS缩放图像而无需调整大小

来自分类Dev

CSS / JS调整大小以适合图像大小

来自分类Dev

使用javascript调整图像大小

来自分类Dev

使用imagemagick调整图像大小

来自分类Dev

使用Java调整图像大小

来自分类Dev

使用 javascript 调整图像大小

来自分类Dev

如何防止在CSS中调整图像大小?

来自分类Dev

CSS图像按高度调整大小

来自分类Dev

CSS使图像调整大小并适合任何屏幕

来自分类Dev

CSS图像调整大小问题

来自分类Dev

自动调整CSS中图像的大小

来自分类Dev

CSS悬停边框,无需调整图像大小

来自分类Dev

CSS 图像水平调整大小

来自分类Dev

使用CSS调整滑块大小

来自分类Dev

使用CSS调整滑块大小

来自分类Dev

CSS-如何在调整浏览器大小时使用背景图像调整texbox的大小?

来自分类Dev

CSS Flex:根据图像大小调整Flex框的大小

来自分类Dev

使用PHP直接从URL调整图像大小

来自分类Dev

使用createjs / easyljs调整图像大小