div内图像周围不需要的空白区域

Question

我需要在public <T extends ApiResponse> Observable.Transformer<T, T> applyRetryLogic(Activity activity) { return observable -> observable .retryWhen(err -> err.flatMap(throwable -> { L.d(Thread.currentThread() + " Error!"); if (throwable instanceof NetworkException) { PublishSubject<Integer> choice = PublishSubject.create(); activity.runOnUiThread(() -> { MaterialDialog dialog = retryDialog(activity); View retry = dialog.getActionButton(DialogAction.POSITIVE); View cancel = dialog.getActionButton(DialogAction.NEGATIVE); RxView.clicks(retry).subscribe(o -> { dialog.dismiss(); choice.onNext(1); }); RxView.clicks(cancel).subscribe(o -> { dialog.dismiss(); choice.onError(throwable); }); dialog.show(); }); return choice; } else { return Observable.error(throwable); } })); } 内div显示图像，并且图像周围的空白处于未调用状态。这就是它的样子：

我不是在谈论白色背景 - 这是故意的。我说的是图像没有伸展到bootstrap的宽度。这是我使用的代码：

div

相关的<div align="center" class="col-xs-3 col-sm-2 col-md-3 whitebgdiv" style="border:0px solid red; margin-top:5px; margin-bottom:5px; margin-left:5px;"> <a href='#{product.itemUrl}' target="_blank"><img src='#{product.thumbnailUrl}' style="border: 0px solid blue;" class="img-responsive productimg vertical-align2" /></a> <br/> </div> 课程：

css

我尝试了.whitebgdiv { background-image:url('../resources/images/whitebg.jpg'); border-radius: 2px; margin-left:0px; } .productimg { width: 6em; max-width: 180px; } 和display:block，但他们什么也没做。我错过了什么？

Answer 1

试试这个：

.productimg{
  width: 100%;
  height: auto;
}

如果定义了容器的宽度，则不需要使用此代码在图像上设置最大宽度。

Answer 2

使用宽度100％并删除最大宽度。

.productimg { display:block; width: 100%; height:auto;}

Answer 3

删除宽度以使空白区域为max-width到图像标记。容器（div）高于图像宽度，因此您可以在这些

之间获得空白