嵌套在标记中时如何更改图像大小

I would like to know how to change the size of an image when it is nested in a paragraph tag. The problem is that when nested in a paragraph, it won't take the values I set in the CSS for #3D1.

My current HTML:

我想知道如何在嵌套在段落标记中时更改图像的大小。问题是,当嵌套在段落中时,它不会采用我在CSS中为#3D1设置的值。我目前的HTML:

<p id="work3">
  <img id="3D1" src="img/photos/3D1.jpg">
</p>

My current CSS for the image:

我目前的图片CSS:

#3D1{
  width:500px;
}

My current CSS for paragraph "work3":

我目前的CSS为段落“work3”:

#work3{
  font-size:17px;
  font-family: HelveticaNeue-Thin;
  line-height:24px;
  letter-spacing: 1px;
  color:#404040;
  text-align:justify;
  padding-left:10px;
  width:510px;
  height:332px;
}

All help greatly appreciated!

所有帮助非常感谢!

EDIT: While fiddling with the code in hopes of fixing it, I managed to find the problem. My problem was that I started the name of my ID with a number. Apparently, HTML and CSS don't sit well with that, and they just didn't "see" the properties of the images. In a way, I managed to fix the problem myself, but the ones who helped me were of great help! Thanks!

编辑:虽然摆弄代码希望修复它,我设法找到问题。我的问题是我用一个数字开始了我的ID名称。显然,HTML和CSS并不适合这种情况,他们只是没有“看到”图像的属性。在某种程度上,我设法自己解决问题,但帮助我的人是非常有帮助的!谢谢!

3 个解决方案

#1

Okay I just remember this. just remove the number on your id/class name. I remember that its better not to start with a number if your naming a id/class. Just change "3D1" to "D1" maybe?

好的,我记得这个。只需删除您的ID /类名称上的数字。我记得如果你命名一个id / class,最好不要从数字开始。可以将“3D1”更改为“D1”吗?

#2

#3D1 {
  width:500px;
}

#work3 #3D1 {
  width: 510px;
}

Since you've defined the width through an id selector, you need to override the rule by a selector with higher specificity (e.g. p img { ... } won't work)

由于您已通过id选择器定义了宽度,因此需要通过具有更高特异性的选择器覆盖规则(例如,p img {...}将无效)

#3

try this

#work3 img{
   width:500px;
   height:200px;
}

this will make all images warped under the <p> tag with id #work3

这将使所有图像在id为#work3的

标签下变形

#1