Question

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

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

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

Answer 1

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

wrong

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

因此，请使用以下代码：

less than

＆＃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;

Answer 2

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

Answer 3

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

Answer 4

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

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

半响应图像取决于宽度

4 个答案: