src="imageUrl in Html“的样式

Question

如何设置来自API imageUrl的图片的样式？我正在尝试添加一些列之间的填充。来自API的图像来得很好，但它们在中小尺寸上如此接近，根本没有间距，屏幕似乎很适合移动设备。我尝试了bootstrap 4.3 img-fluid，但它使图像非常小。

小代码段

       <div class="container"  >
        <div class="row" style="margin-top: 20px;">
          <div class="col-4" style="padding-right: 20px">   
              <img   [src]="x.imageUrl"   alt="images"/>
          </div>
        </div>
       </div>

我想在我继续走这条路之前，我需要知道这是否可能。

提前感谢你

PH值

Answer 1

你可以在你的图片标签中添加一个类，或者用img选择器在CSS中设置每个图片的样式。

您的CSS代码可能如下所示：

img {
  padding: 30px;
  height: 300px;
}

试试看：https://jsfiddle.net/braganca/y0umpfwn/7/

在这里你可以看到如何复制它：https://stackblitz.com/edit/angular-ivy-ww1eqs?file=src/app/app.component.html

Answer 2

在我的例子中，这对我不起作用，我的图像来自api，因此只有一个图像标签。我也开发了响应性。我使用bootstrap和简单的CSS3样式为我想要分享的布局添加了一些适合我的东西。样式是内联的，用于测试目的，我将把它添加到样式表的类中。需要注意的是，我确实覆盖了样式表中的bootstrap img-fluid类，以使其正常工作。

.img-fluid{
 max-height: 100%;
 }

这只是一小段代码。这对我很有效。

<div class="container" style="height:100%; width:300px;">
  <div class="row" style="margin-top: 20px">
   <div class="col-6">
    <img class="img-fluid" [src]="someinputproperty.imageUrl" 
    alt="clothing"/>
   </div>
  </div>
</div>