英文:
Uploaded images: uploaded SVGs do not fit display container
问题
我有一个带有上传图片字段的表单。图片可以是png、jpeg或svg格式。当上传的图片是svg时，它不适应容器的大小。
我们正在使用Cloudify来处理上传数据的URL。该组件将负责显示经Cloudify转换的URL...我需要SVG适应容器大小显示。
并不是SVG内联，我无法控制用户上传的格式。
<img
class="vehicle-image"
[src]="provUrl(imageUrl)"
alt="已上传的图片"
/>
.vehicle-image {
object-fit: contain;
width: 100%;
height: 100%;
}
对于png或jpeg，这样做效果很好，但对于SVG则不行...我该如何解决SVG的显示问题？
英文:
I have a form with an upload image field. Images can be png, jpeg or svgs.
When the image is uploaded and is an SVG, is doesnt fit the container size.
Cloudify is being used to handle the URL of the uploaded data. The component will just handle to display the URL transformed by cloudify...I need the sgvs to fit on this container when being displayed.
Is not a SVG inline, I have no control of the format the user will upload.
<img
class="vehicle-image"
[src]="provUrl(imageUrl)"
alt="Uploaded Image"
/>
.vehicle-image {
object-fit: contain;
width: 100%;
height: 100%;
}
it works fine for pngs or jpegs, but not for SVGs...what could I have to work this around for SVGs also?
答案1
得分: 0
对于SVG，您需要提供高度和宽度值。如果将SVG的高度和宽度都设置为100％，它将占据其边界框的全部宽度和高度。PNG和JPEG具有固定的高度和宽度，因此不会超出这些尺寸。
一种解决方法是将img标签包装在div标签中，并为该div元素提供最大高度和最大宽度。
<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
英文:
For SVGs you need to provide a height and width values. If you provide height and width of 100% to the SVG, it will occupy the full width and height of its bouding box. PNG and JPEG has fixed height and width so it will not stretch beyond those dimensions.
One solution is to wrap the img tag in a div tag and provide a max-height and max-width to that div element.
<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;
}
Working link: Replit
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论