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

luaexgnf  于 2023-05-12  发布在  Java
关注(0)|答案(1)|浏览(122)

我有一个上传图像字段的表单。图像可以是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做些什么呢?

q1qsirdb

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

相关问题