Html 如何使评论框中的图像变小

我做了一个评论框，我希望图像比框的尺寸小。请帮忙 我当前的代码：

<div style="border: 0px solid black; box-shadow: 1px 1px 1px #888888;background-color:white;">
    <p style="float: left;font-size:12px; "></p>

    <img alt="2" src="Imgs/test.png">
    <b>danny Boyle:</b>
    "This is a test comment "
</div>

这就是我想要制作的：

---

对于HTML中的图像标记，您可以指定/限制图像的高度和宽度，因此您应该能够以这种方式限制其大小

因此：

---

给定以下图像大于css中定义的框尺寸：

<div id="Box" >
<img id="Image1" src="http://fianbakken.com/wordpress/wp-content/uploads/2013/02/logo.png" />

您可以使用JQuery缩放图像，例如如下所示：

if($("#Image1").width() >= $("#Box").width()){
   $("#Image1").width($("#Box").width()-20);
}

if($("#Image1").height() >= $("#Box").height()){
   $("#Image1").height($("#Box").height()-20);
}

我举了一个小例子来说明这个例子

---

远离内联样式并稍微调整元素，您可以获得想要的结果，查看实际结果：

HTML:

---

如果您使用的是引导，那么请尽量使用它。有几种工具可以满足您的需要，即样式：

更改标记：

<div class="media my-media">
  <img class="pull-left media-object" src="your/image.jpg">
  <div class="media-body">
      <p><b>danny Boyle:</b></p>
      <p>"This is a test comment"</p>
    </div>
  </div>
</div>

结果：图像上的灰色边框实际上在你的化身中

---

你能说明你试过什么吗？空的有什么用？图像和注释边框是一样的。我需要在注释框中给图像留一个空格/填充，同时要记住页面的响应性。你很清楚CSS，所以你一定尝试过什么。我将给出一个提示：填充但是，页面没有保持响应？我正在使用Twitter Bootstrap我已经使用了Twitter Bootstrap，那么它会保持响应吗？虽然我没有使用Twitter Bootstrap，但我不明白为什么不使用它，因为它只是调整标签本身的基本属性，在本例中是调整其大小。使用jQuery来缩放图像有点过分了。简单地选择给图像一个最大宽度，给它的容器一个固定的宽度，就可以得到相同的结果。是的，这就像用火箭筒射击一只松鼠，有点不必要。CSS解决方案是更好的方法。

if($("#Image1").width() >= $("#Box").width()){
   $("#Image1").width($("#Box").width()-20);
}

if($("#Image1").height() >= $("#Box").height()){
   $("#Image1").height($("#Box").height()-20);
}

<div class="box">
  <div class="img"><img alt="2" src="http://placehold.it/150x150" /></div>
    <span>danny Boyle:</span>
    "This is a test comment "
</div>

.box {
  border: 0px solid black; 
  box-shadow: 1px 1px 1px #888888;
  background-color:white;
  padding-top:10px;
}
.box .img {
  float:left;
  font-size:12px;
  margin: 0px 10px 10px;
  width:100px;
  height:100px;
}
.box img {
  max-width:100%;
}
.box span {
  display:block;
  font-weight:bold;
  margin-bottom:15px;
}
.box:after {
  display:block;
  clear:both;
  content:"";
}

<div class="media my-media">
  <img class="pull-left media-object" src="your/image.jpg">
  <div class="media-body">
      <p><b>danny Boyle:</b></p>
      <p>"This is a test comment"</p>
    </div>
  </div>
</div>

.my-media {
    box-shadow: 1px 1px 1px #888888;
    background:#fff;
    padding:10px;
}