如何在缩放的IMG周围缩小DIV？ [英] How to shrink a DIV around a scaled IMG?
问题描述
对所有CSS大师来说，一个简单的（可能会想到的）问题：我想围绕IMG缩小DIV 。 IMG是600 x 800，我需要它更小。所以我去{height：100％; width：auto;}并通过包装DIV约束高度。但是，为了保持AR（我不知道），我无法修复DIV上的宽度。我尝试将包装DIV设置为display：inline-block或float：left或position：absolute或... - 无论如何：大多数浏览器都会将该DIV拉伸到800px宽 - 原始宽度 - 大小的IMG - 所以它看起来像这样的sthg：
[[IMG] .................... .........]
奇怪的是，我可以在DIV中添加一些文本（仅用于测试），并且该文本实际上会显示在旁边缩放的IMG：
[[IMG] Hello world ..................]
有没有人知道为什么IMG的原始大小很重要（用于确定宽度的大小，它不影响高度）？而我可能会做的收缩DIV？
感谢您的期待。
编辑：
为了测试PärWieslander的想法，我写了一个小测试床，这个测试床应该能够帮助我澄清我的情况：
< ; style type =text / css>
html，body {
height：100％;
}
#dialog {
background：green;
身高：50％;
职位：亲属;
}
#frame {
border：2px纯黑色;
display：inline-block;
身高：100％;
位置：绝对;
}
#img {
height：100％;
width：auto;
}
< / style>
< body>
< div id =dialog>
< div id =frame>
< img id ='img'src ='...'/>
< / div>
< / div>
< / body>
只需选择您所选择的任何大 IMG即可。你应该找到一个莫名其妙的宽框架和图像，已经挤压 - 高度明智 - 到绿色的地毯上。 将图像的宽度或高度指定为百分比，该百分比按照父块大小的比例计算。因此，对图像指定 width：50％并不意味着原始图像宽度的50％ - 这意味着父块宽度的50％ / strong>即可。高度也是一样。因此，只要您指定宽度或高度为百分比，就会在图像周围留出额外的空间。解决方法很简单 - 以像素为单位指定尺寸，ems或除百分比以外的任何其他单位：
HTML
< div class =wrapper>
< img class =smallsrc =myimage.jpg>
< / div>
CSS
img.small {
width：150px; / *或任何你喜欢的* /
display：block; / *以避免图像下面的空白* /
}
div.wrapper {
display：inline-block;
border：1px solid＃000;
code $
编辑： 根据你的评论和更新后的帖子，我明白你真正想要做的是设置周围的div的宽度，并使图像填满该div。下面是一个例子：
HTML
< div class =wrapper big>
< img src =myimage.jpg>
< / div>
< div class =wrapper small>
< img src =myimage.jpg>
< / div>
CSS
img {
display：block;
宽度：100％;
}
.wrapper {
margin-top：1em;
border：1px solid＃000;
}
.big {
width：600px;
}
.small {
width：300px;
}
A simple (one might think!) question to all CSS gurus: I would like to shrink a DIV snugly around an IMG. The IMG is 600 x 800 and I needed it much smaller. So I go {height: 100%; width: auto;} and constrain the height via a wrapper DIV. However, to maintain the (unknown to me) AR, I cannot fix the width on the DIV. I tried to set the wrapping DIV to "display: inline-block" or "float: left" or "position: absolute" or ... - no matter: most browsers will stretch that DIV 800px wide - the original width of the full-size IMG - so it looks sthg like this:
[[IMG].............................]
Bizarrely, I can add some text to the DIV (just to test), and that text will actually appear right next to the scaled IMG:
[[IMG]Hello world..................]
Does anyone here know why the original size of the IMG matters (for dimensioning the width, it does not affect the height)? And what I might be able to do to shrink the DIV?
Thanks for looking.
EDIT:
To test Pär Wieslander's idea, I wrote a little test bed that should help clarify what I am on about:
<style type="text/css">
html, body {
height: 100%;
}
#dialog {
background: green;
height: 50%;
position: relative;
}
#frame {
border: 2px solid black;
display: inline-block;
height: 100%;
position: absolute;
}
#img {
height: 100%;
width: auto;
}
</style>
<body>
<div id="dialog">
<div id="frame">
<img id='img' src='...' />
</div>
</div>
</body>
Just pick any large IMG of your choice. You should find an inexplicably wide frame around and image that has squeezed - height-wise - onto the green carpet.
解决方案 If you specify the image's width or height as a percentage, that percentage is calculated in proportion to the size of the parent block. So specifying width: 50% on the image doesn't mean 50% of the original image width -- it means 50% of the width of the parent block. The same goes for the height. Thus, there will always be extra space around the image as long as you specify the width or height as a percentage.
The solution is simple -- specify the dimensions in pixels, ems or any other unit other than a percentage:
HTML
<div class="wrapper">
<img class="small" src="myimage.jpg">
</div>
CSS
img.small {
width: 150px; /* or whatever you like */
display: block; /* to avoid empty space below the image */
}
div.wrapper {
display: inline-block;
border: 1px solid #000;
}
Edit: Based on your comments and updated post, I understand that what you really want to do is to set the width of the surrounding div and make the image fill up that div. Here's an example that does that:
HTML
<div class="wrapper big">
<img src="myimage.jpg">
</div>
<div class="wrapper small">
<img src="myimage.jpg">
</div>
CSS
img {
display: block;
width: 100%;
}
.wrapper {
margin-top: 1em;
border: 1px solid #000;
}
.big {
width: 600px;
}
.small {
width: 300px;
}
这篇关于如何在缩放的IMG周围缩小DIV？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
