Html 通过父 DIV 更改图像大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9556514/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change image size via parent DIV
提问by funerr
I tried to do so but it didn't change the size:
我试图这样做，但它没有改变大小：
<div style="height:42px;width:42px">
<img src="http://someimage.jpg">
</div>
What will re-size it (I can't edit/touch the img element itself).
什么会重新调整它的大小（我无法编辑/触摸 img 元素本身）。
Thanks in advance.
提前致谢。
回答by Ilja
I'm not sure about what you mean by "I have no access to image" But if you have access to parent div you can do the following:
我不确定“我无权访问图像”是什么意思但如果您有权访问父 div，则可以执行以下操作：
Firs give id or class to your div:
首先为您的 div 提供 id 或 class：
<div class="parent">
<img src="http://someimage.jpg">
</div>
Than add this to your css:
将其添加到您的 css 中：
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
回答by Sarfraz
Apply 100%width and height to your image:
将100%宽度和高度应用于您的图像：
<div style="height:42px;width:42px">
<img src="http://someimage.jpg" style="width:100%; height:100%">
</div>
This way it will same size of its parent.
这样，它的大小将与其父级相同。
回答by Debbie
Yours:
你的：
<div style="height:42px;width:42px">
<img src="http://someimage.jpg">
Is it okay to use this code?
可以使用这个代码吗？
<div class= "box">
<img src= "http://someimage.jpg" class= "img">
</div>
<style type="text/css">
.box{width: 42; height: 42;}
.img{width: 20; height:20;}
</style>
Just trying, though late. :3 For someone else reading this, letme know if the way i wrote the code were not good. im new in this kind of language. and i still want to learn more.
只是尝试，虽然晚了。:3 对于阅读本文的其他人，如果我编写代码的方式不好，请告诉我。我是这种语言的新手。我仍然想了解更多。
回答by JJ_Coder4Hire
Actually using 100% will not make the image bigger if the image is smaller than the div size you specified. You need to set one of the dimensions, height or width in order to have all images fill the space. In my experience it's better to have the height set so each row is the same size, then all items wrap to next line properly. This will produce an output similar to fotolia.com (stock image website)
如果图像小于您指定的 div 大小，实际上使用 100% 不会使图像更大。您需要设置尺寸、高度或宽度之一，以便让所有图像填充空间。根据我的经验，最好设置高度以使每一行的大小相同，然后所有项目都正确地换行到下一行。这将产生类似于 fotolia.com（图片网站）的输出
with css:
使用 CSS：
parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 42px;
}
without:
没有：
<div style="height:42px;width:42px">
<img style="height:42px" src="http://someimage.jpg">
</div>
回答by Gorodeckij Dimitrij
I am doing this way:
我这样做：
<div class="card-logo">
<img height="100%" width="100%" src="http://someimage.jpg">
</div>
and CSS:
和 CSS：
.card-logo {
width: 20%;
}
I prefer this way, as if I need to upscale - I can use 150% as well
我更喜欢这种方式，好像我需要升级 - 我也可以使用 150%
