如何使评论框中的图像更小

Question

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

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

这就是我想要制作的：

Answer 1

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

HTML：

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

CSS：

.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:"";
}

Answer 2

如果您使用的是Bootstrap，那么尽可能地使用它。有一些工具可以做你想要的，即Media Object样式：

更改标记：

<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，以便我们可以自定义：

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

结果：http://jsfiddle.net/Xqxgy/（ ^{_{图片上的灰色边框实际上在您的头像中}} ）

Answer 3

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

http://www.w3schools.com/tags/tag_img.asp

所以：

 <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" height="X" width="Y">
    <b>danny Boyle:</b>
    "This is a test comment "
</div>

Answer 4

给定以下内容（图像大于css中定义的Box尺寸）：

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

使用以下样式：

#Box {

    background-color: #f00;
    width:200px; 
    height:300px; 
    overflow:none;
}

您可以使用JQuery缩放图像，例如类似的事情：

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

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

我提出了一个小JSFiddle来说明这个例子

http://jsfiddle.net/7qnyQ/8/