半响应图像取决于宽度

时间:2017-07-28 03:49:01

标签: javascript html css css3

我有一个600px宽的div,里面有一个图像。我希望图像的最大宽度为600px,但我不希望图像为100%,以使其响应。

更好的例子是,如果我的图像宽度小于600px,则不会使其响应,但如果它大于600则使其响应。

<div style="max-width: 600px; width: 100%">
  <img src="some-image.jpg" alt="">
</div>

4 个答案:

答案 0 :(得分:0)

如果你使用 conn.ConnectionString = ConfigurationManager.ConnectionStrings("ConnStringGREEN")

wrong

因为如果图像宽度为img { width:100% max-width:600px; } 600px,则宽度增加到600px。

因此,请使用以下代码:

less than

&#13;
&#13;
$(document).ready(function(){
  $('div img').each(function(){
    if($(this).width() > 600)
      $(this).width('100%');
  })
})
&#13;
$(document).ready(function(){
  $('div img').each(function(){
    if($(this).width() > 600)
      $(this).width('100%');
  })
})
&#13;
div {
  max-width: 600px;
  width: 100%;
}

.big {
  width: 1000px;
}

.small {
  width: 500px;
}
&#13;
&#13;
&#13;

答案 1 :(得分:0)

对于图像使用宽度:100%高度:自动 和容器使用最大宽度:600px ; 它会使你的形象变得非常复杂。

答案 2 :(得分:0)

width控件CSS分配给图片,而不是<div>。容器width上的任何<div>值都会限制所包含的img。比说明更容易看到(至少对我而言)。例如:

img {
 max-width:350px;
 width:100%;
}
<div style="width:200px;background:#0ff"><img src="http://via.placeholder.com/350x150" /><br />
200 wide</div>
<div style="width:350px;background:#0f0"><img src="http://via.placeholder.com/350x150" /><br />
350 wide</div>
<div style="width:400px;background:#ff0"><img src="http://via.placeholder.com/350x150" /><br />
400 wide</div>
<div style="width:100%;background:#f77"><img src="http://via.placeholder.com/350x150" /><br />
full width</div>

答案 3 :(得分:0)

尝试bootstrap .. bootstrap内置类,使图像响应..尝试下面的代码

 <img class="img-responsive" src="img_chania.jpg" alt="Chania" width="460" height="345">