[英]How to make SVG image a specific size when responsive screen hits certain display?
I don't know if I need to use javascript or not, but any idea how I can make a SVG image a specific size when the screen hits a certain display (example, 640×480 pixels)? 我不知道是否需要使用javascript,但是不知道如何在屏幕达到特定显示效果(例如640×480像素)时使SVG图像达到特定大小?
My SVG image is already responsive, but I want it to appear smaller in the mobile display. 我的SVG图像已经响应,但是我希望它在移动显示器中显得更小。
thanks! 谢谢!
You could have a section in your CSS something like: 您可以在CSS中添加以下内容:
@media screen and (max-width: 480px) {
svg {
max-width: 200px;
max-height: 200px;
}
}
markup 标记
<svg
width="120"
height="120"
viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="1000" height="1000"/>
</svg>
</div>
styles 款式
svg { /* make it generally responsive */
display: block;
width: 100%;
height: 100%;
}
.box {
max-width: 300px;
}
@media (min-width: 600px) { /* when 600px and bigger */
.box {
max-width: 200px;
}
}
https://jsfiddle.net/sheriffderek/z9fw1ndr/ https://jsfiddle.net/sheriffderek/z9fw1ndr/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.