javascript 上传图片：上传的SVG不适合显示容器

luaexgnf 于 2023-05-12 发布在 Java

关注(0)|答案(1)|浏览(121)

我有一个上传图像字段的表单。图像可以是png，jpeg或svgs。当图像上传并且是SVG时，它不适合容器大小。
Cloudify用于处理上传数据的URL。该组件将只处理显示由cloudify转换的URL...我需要的sgvs，以适应这个容器显示时。
不是SVG内联，我无法控制用户上传的格式。

<img
  class="vehicle-image"
  [src]="provUrl(imageUrl)"
  alt="Uploaded Image"
/>

.vehicle-image {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

它适用于PNG或JPEG，但不适用于SVG...我还能为SVG做些什么呢？

JavaScript

来源：https://stackoverflow.com/questions/76219229/uploaded-images-uploaded-svgs-do-not-fit-display-container

1条答案

按热度按时间

q1qsirdb1#

对于SVG，您需要提供高度和宽度值。如果为SVG提供100%的高度和宽度，它将占据其bouding框的全部宽度和高度。PNG和JPEG具有固定的高度和宽度，因此不会超出这些尺寸。
一种解决方案是将img标签 Package 在div标签中，并为该div元素提供max-height和max-width。

<div class="img-div">
    <img
  class="vehicle-image"
  src="https://upload.wikimedia.org/wikipedia/commons/b/b0/NewTux.svg"
  alt="Uploaded Image"
/>        
</div>

CSS

.vehicle-image {
    object-fit: contain;
    width: 100%;
    height: 100%;
 }
 .img-div {
   max-width: 200px;
   max-height: 200px;
}

工作链接：Replit

赞(0）回复(0）举报 2023-05-12

我来回答

javascript 上传图片：上传的SVG不适合显示容器

1条答案

相关问题

热门标签

最新问答