通过父 div 更改图像大小答案

【问题标题】：Change image size via parent div通过父 div 更改图像大小
【发布时间】：2012-03-22 07:50:29
【问题描述】：

我尝试这样做，但它没有改变大小：

<div style="height:42px;width:42px">
   <img src="http://someimage.jpg">
</div>

什么会重新调整它的大小（我无法编辑/访问 img 元素本身）？

提前致谢。

【问题讨论】：

设置一维。另一个维度将调整大小以均匀缩放。 someimage.jpg">

标签： html image-size

【解决方案1】：

我是这样做的：

<div class="card-logo">
    <img height="100%" width="100%" src="http://someimage.jpg">
</div>

和 CSS：

.card-logo {
    width: 20%;
}

我更喜欢这种方式，好像我需要升级 - 我也可以使用 150%

【讨论】：

【解决方案2】：

如果图像小于您指定的 div 大小，实际上使用 100% 不会使图像变大。您需要设置尺寸、高度或宽度之一，以使所有图像填满空间。根据我的经验，最好设置高度，以便每行大小相同，然后所有项目正确包装到下一行。这将产生类似于 fotolia.com（库存图片网站）的输出

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

没有：

<div style="height:42px;width:42px">
    <img style="height:42px" src="http://someimage.jpg">
</div>

【讨论】：

【解决方案3】：

你的：

  <div style="height:42px;width:42px">
  <img src="http://someimage.jpg">

这个代码可以用吗？

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

只是尝试，虽然晚了。 :3 对于其他阅读本文的人，让我知道我编写代码的方式是否不好。我是这种语言的新手。我仍然想了解更多。

【讨论】：

这没有回答问题。使用 CSS 和内联样式是等价的
尝试用答案来回答问题，而不是进一步的问题。欢迎来到本站！ :)

【解决方案4】：

我不确定您所说的“我无法访问图像”是什么意思，但是如果您可以访问父 div，您可以执行以下操作：

Firs 为您的 div 提供 id 或类：

<div class="parent">
   <img src="http://someimage.jpg">
</div>

将其添加到您的 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%;
}

【讨论】：

这正是 Sarfraz 所说的 :)
@Mattis 哦，是的，对不起，我没有阅读 cmets，确实是一样的东西））
一个可靠的解决方案！ 注意：您没有设置高度。我在声明中忽略了这一点，让高度是自动的，而宽度与其父级一致。

【解决方案5】：

将100% 宽度和高度应用于您的图像：

<div style="height:42px;width:42px">
  <img src="http://someimage.jpg" style="width:100%; height:100%">
</div>

这样它的大小将与其父级相同。

【讨论】：

@agam360：那么你将不得不使用JS，更新答案。
@Sarfraz，别无他法？（我也不会使用 js :( ）但我可以使用 php 函数。
@agam360: 你可以访问父 div 吗？在这种情况下，可以使用 css。
@agam360: 如果你可以访问父 div，你可以使用这个 css 然后：#parentDiv img { height: 100%; width: 100%; }