I've been grappling with the following code snippet. I'm struggling to make my SVG image fit within my container div.
.img {
margin: 0;
padding: 0;
overflow: hidden;
width: 500px;
position: relative;
}
img {
top:0;
left:0;
height:500px;
width:100%;
}<div class="img">
<img src="https://svgur.com/i/SPb.svg" alt="An svg image">
</div>Check out my Codepen: https://codepen.io/huyct1996/pen/zYKwXjM
I would really appreciate any assistance. Thank you!
Revise the svg file to center the text within it rather than translating it.
<svg width="100%" height="400" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="1" fill="#ECEEF4" />
<rect y="112" width="100%" height="1" fill="#ECEEF4" />
<rect y="336" width="100%" height="1" fill="#ECEEF4" />
<rect y="56" width="100%" height="1" fill="#ECEEF4" />
<rect y="280" width="100%" height="1" fill="#ECEEF4" />
<rect y="224" width="100%" height="1" fill="#ECEEF4" />
<rect y="168" width="100%" height="1" fill="#ECEEF4" />
<rect y="392" width="100%" height="1" fill="#ECEEF4" />
<text fill="#8B90A0" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle">Drop it here or add a file</text>
</svg>The svg will maintain its vertical size as the Y attributes are numeric values rather than percentages
To ensure the SVG occupies the entire area of the div, simply apply width:100%; height:100% in the CSS.
<div class="picture">
<img style="width:100%; height: 100%;" src="image.svg" alt="graphic">
</div>
Your issue is resolved using the object-fit:contain property. See the code snippet below to implement it:
UPDATE: The SVG file may have some limitations, so I have embedded the SVG directly into the HTML for a better display:
.img-wrapper {
height: 500px;
width: 500px;
}
img {
height: 100%;
width: 100%;
object-fit: contain;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="img-wrapper">
<!-- <img
src="https://raw.githubusercontent.com/huyct1996/images/3ddca45402fbc1ce4ee0f1a58f67a34f87f2d8aa/empty.svg"
alt="An SVG Image"
/> -->
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="100%"
fill="none"
>
<rect width="100%" height="1" fill="#ECEEF4" />
<rect y="112" width="100%" height="1" fill="#ECEEF4" />
<rect y="336" width="100%" height="1" fill="#ECEEF4" />
<rect y="56" width="100%" height="1" fill="#ECEEF4" />
<rect y="280" width="100%" height="1" fill="#ECEEF4" />
<rect y="224" width="100%" height="1" fill="#ECEEF4" />
<rect y="168" width="100%" height="1" fill="#ECEEF4" />
<rect y="392" width="100%" height="1" fill="#ECEEF4" />
<text
fill="#8B90A0"
x="50%"
y="50%"
dominant-baseline="middle"
text-anchor="middle"
>
Drop it here or add a file
</text>
</svg>
</div>
</body>
</html>After successfully rendering my jqPlot, I encountered an issue when exporting it as an image. The axes text and legend labels aren't displaying correctly in the exported image - the text seems to be shifting. Here's a comparison of the actual plo ...
I'm working on creating a program that can tally the number of dots on dominoes in an image, such as the one shown here: https://i.sstatic.net/NKHXl.jpg My goal is to develop this functionality using JavaScript. I've attempted to learn how to u ...
My current HTML page structure looks like this: <body ng-controller="DashboardDisplay" onload="submit()"> <div class="container-fluid" > {{scope.arr}} </div> </body> <script> var myApp = angular.module(&apos ...
How can I ensure that HTML5 markup elements such as <header>, <section>, and <footer> are displayed properly in Internet Explorer? I've noticed that when I apply CSS to these elements, the styling doesn't always work as expecte ...
Is there a way to target only the p tag with id="this" using .root p:first-child selector? Here is the code snippet: Link to CodePen .root p:first-child { background-color: green; } p { margin: 0; } .container { display ...
My code is functioning as expected for single-digit numbers but encounters issues with two or three-digit numbers. I want to stick to this approach without utilizing the math max function. The primary issue lies in only considering the first digit of a tw ...
I came across an interesting blog post titled Experimenting with Node.js and decided to try setting it up on my own using the author's provided gist. Unfortunately, I encountered some issues. After further investigation, I discovered that even though ...
Creating a ul as input is my goal, similar to this example on jsfiddle: http://jsfiddle.net/hailwood/u8zj5/ (However, I want to avoid using the tagit plugin and implement it myself) I envision allowing users to enter text in the input field and upon hitt ...
I am currently working on a Django project where users can add comments to posts. The information is saved directly in the database, which is functioning properly. However, I am facing an issue where after submitting the comment, the form keeps resubmittin ...
I'm currently facing a challenge with a table on my webpage that displays data but isn't scrolling all the way to the bottom. This code was implemented by previous developers, and as someone who isn't well-versed in CSS, I'm struggling ...
Trying to place a link on a 1920x1080 picture and keep it fixed in one spot, regardless of browser size. Any suggestions? <!DOCTYPE html> <link rel="stylesheet" href="../style.css" /> <html> <head> ...
I am currently working with a function component that looks like this: const Navbar = ({setNav, nav}) => { const [justify, setJustify] = useState('space-around') //get localStorage const user = JSON.parse(localStorage.getItem('user& ...
Can you assist me in capturing input data using the Fiber Golang framework? <form action="/" method="POST" novalidate> <div> <p><label>Email Address:</label></p> <p><inp ...
An issue has been identified that is specific to Chrome. The dropright selected menu appears differently in Chrome compared to Firefox, where it displays correctly with a white background. !https://i.sstatic.net/BulRA.jpg The Bootstrap version being used ...
<div id="abc"> <div id="a_b"> abcd </div> <div id="c_d"> xyz </div> </div> I have a challenge where the divs on my page are generated dynamically and their IDs change every time the page loads. When the window i ...
I'm relatively new to the world of JavaScript. Currently, I'm tackling an algorithm that involves deflating in Java and inflating in JavaScript. While researching solutions, I came across pako.js as a recommended tool for decompression. However, ...
Those who have marked it as duplicate, I want to clarify that my question is not about making Bootstrap columns all the same height. Instead, I am focusing on responsive images while maintaining their aspect ratio, which is a different issue from simply en ...
In my current web form, there is a dynamic option that adds rows with the same attributes. These rows need to be submitted through an Ajax call to my PHP for insertion into the database. Access: <tr> <td><input type"text" name="access[nam ...
Here is the code snippet in question: $('#ad img').each(function(){ if($(this).width() > 125){ $(this).height('auto'); $(this).width(125); } }); While this code works correctly in Firefox, it seems to have i ...
At the moment, we are able to resize the table border when we drag the corner. However, my goal is to enable resizing on the right side of the full border. https://i.sstatic.net/yFI24.png Below is the CSS code for resizing: th{ resize: horizontal; ove ...