Question

我的div宽度样式为65％。

然后我将img放在此div内，没有任何css样式属性，但此img宽度超过65％，并移出div帧。

如何调整img宽度而不给它任何css样式？

<div style="width: 65%">
    <img src="assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg">
    </div>

Answer 1

试试这个。

img{
  width:100%;
  height: auto;
}

Answer 2

设为背景图片

<div class="product-image" style="width: 65%;  background-image:url(assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg');"></div>

Answer 3

不确定你想做什么，你能澄清一下吗？

在任何情况下，您都可以，而且您不能，这取决于您如何看待它。大多数图像都是像素“网格”，无论你做什么，都会以像素为单位设置大小。

您可以在HTML中设置尺寸：

<img src="assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg" height="42" width="42">

但是这实际上不会调整图像的大小，只需将其推到一起或拉伸它，这样你的质量就会受到影响。（与CSS相同）而且这些日子这被认为是一种不好的方式。

如果您无法直接定位图片，可能会将图片作为其容器的子图片定位吗？

div img {
 width: 100px;
 height 100px;
}

但实际上，你应该更多地解释你想做什么以及为什么你的限制是他们的。

Answer 4

在div标签样式中使用！important。标记为！important的CSS规则优先于后来的规则。通常在CSS中，规则从上到下工作，因此如果您为样式表下方的元素或辅助样式表中的元素指定了新样式，则后面的规则将优先。！important确保此规则具有优先权。

例如在您的情况下：

<div style="width: 65% !important">
    <img src="assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg">
</div>

第一个规则现在具有优先权，因此后面的规则被忽略，img样式将在它的div之后。

如果有帮助，请告诉我。

Answer 5

你的图像比你的div大，因为css不适用于图像，尝试使用

HTML

<div class="image">
    <img src="assets/images/Orion_Nebula_-_Hubble_2006_mosaic_edit_1.jpg">
</div>

CSS

.image{
    width: 65%;
}

.image img{
   width: 100%;
}

这将使div宽度为页面宽度的65％，图像将为div宽度的100％。