-1

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

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

这就是我想要制作的：

这就是我要找的

4

4 回答 4

2

远离内联样式并稍微调整元素，您可以获得您想要的结果（查看此 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:"";
}
于 2013-08-14T12:55:22.350 回答
1

如果您使用的是 Bootstrap，请尽可能多地使用它。有一些工具可以做你想做的事，即媒体对象样式：

更改您的标记：

<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/（图片上的灰色边框其实在你的头像中）

在此处输入图像描述

于 2013-08-14T13:16:43.740 回答
0

对于 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>
于 2013-08-14T12:47:29.843 回答
0

鉴于以下情况（图像大于 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/

于 2013-08-14T12:51:46.500 回答