src="imageUrl in Html" 的样式

Posted 2023-03-05

【中文标题】src="imageUrl in Html" 的样式

【英文标题】：Styling For src="imageUrl in Html"

【发布时间】：2021-12-12 05:27:42

【问题描述】：

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

小sn-p

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

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

提前谢谢你

PH

【问题讨论】：

真的不清楚你在问什么。要么使用 Angular 最佳实践应用样式，要么应用样式类。具体是什么问题？

【参考方案1】：

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

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

img 
  padding: 30px;
  height: 300px;

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

在这里找到了 Angular 的游乐场，您可以查看如何复制它：https://stackblitz.com/edit/angular-ivy-ww1eqs?file=src/app/app.component.html

【参考方案2】：

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

.img-fluid
 max-height: 100%;
 

这只是代码的一个小sn-p。这对我有用。

<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" 
    />
   </div>
  </div>
</div>