Question

我正在尝试调整图像大小以适应这些参数中的胜利，但如果我使用img-responsive它太小了？我只需要它是一个固定的大小或尽可能调整到屏幕分辨率？

function convert(inputString){
  var userurl = inputString
    .match(/www\.(\w*)\.(pdw|plt)\.com/i);
  if(userurl){
    userurl = userurl[1].toLowerCase();
    return "http:‌//www.myurl/user/" +
      "?var-ip1=www." + userurl + ".pdw.com" +
      "&var-ip2=www." + userurl + ".plt.com"
  } else {
    // inputString did not match
    // www.something.pdw.com, or
    // www.something.plt.com
  }
}

console.log(convert('www.hello.pdw.com'));
console.log(convert('www.world.plt.com'));
console.log(convert('wrong input format')); // undefined output

和css是：

<div class="container-fluid f2p-nav hidden-sm hidden-md hidden-lg">
<div class="row">
  <div class="col-xs-4"></div>
  <div class="col-xs-4"><img class="image-container-center img-responsive" src="images/f2p6.png" alt="Chania"></div>
  <div class="col-xs-4"></div>
</div>
</div>

Fiddle

Answer 1

我认为您不需要调整图像大小以适应引导程序中的某个列，您只需要在设置图像大小时使用单位百分比，例如宽度，高度，最大宽度或最小宽度。这是以下代码。我希望这会对你有所帮助。

<div class="col-xs-4"><img class="image-container-center img-responsive" src="images/f2p6.png" alt="Chania" style="width: 100%; height: 100%"></div>

调整图像大小以适应col-xs

1 个答案: