-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 に答える
0

次の場合 (画像は css で定義されたボックスの寸法よりも大きい):

<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 に答える
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 に答える