通过父级div更改图像大小

Question

通过父级div更改图像大小

21

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

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

有什么方法可以改变图片的大小（我无法编辑/访问图片元素本身）？

- funerr

设置一个维度，另一个维度将等比例缩放。 <img style="height:42px;" src="http://someimage.jpg"> - JJ_Coder4Hire

5个回答

8

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

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

这样它就会与其父元素相同大小。

- Sarfraz

@agam360：那么你将不得不使用JS，更新答案。 - Sarfraz

@Sarfraz，没有其他办法吗？（我也不会使用js :( ）但是我可以使用php函数。 - funerr

@agam360：你有父级div的访问权限吗？如果是这样，可以使用CSS。 - Sarfraz

1

如果你可以访问到父级 div，那么你可以使用这个 CSS：#parentDiv img { height: 100%; width: 100%; }。 - Sarfraz

1

实际上，如果图像小于您指定的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>

- JJ_Coder4Hire

1

我正在这样做：

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

和 CSS：

.card-logo {
    width: 20%;
}

我更喜欢这种方式，因为如果需要放大，我也可以使用150%。

- Gorodeckij Dimitrij

0

您的：

  <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 如果有其他人看到这条留言，请告诉我我的代码写得好不好。我在这门语言方面还很新手，还想要学习更多。

- Debbie

这并没有回答问题。使用CSS和内联样式是等效的。 - Slicedpan

1

尝试用答案回答问题，而不是提出更多问题。欢迎来到本站！ :) - ouflak

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ilja · Accepted Answer

我不确定你所说的“我无法访问图像”的意思，但如果你有父级div的访问权限，可以执行以下操作：

首先为你的div分配id或class：

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