Tips for creating an SVG that adjusts its width based on screen size while maintaining a consistent height

My SVG component is currently responsive. However, I am looking to maintain a fixed height of 352px for the SVG while allowing the width to decrease when resizing the window. This way, users can still view my SVG images even as they resize the window.

Does anyone know how to achieve this? Any advice on setting the height while reducing the width for an SVG component?

Here is the code snippet:

/* Carousel CSS */
.svg-container {
    width:100vw;
}
<div class="carousel-item active svg-container">
        <svg id="svg1" version="1.1" viewBox = "0 1 1365 352" preserveAspectRatio="xMidYMid meet">
            <line x1="0" y1="352px" x2="100%" y2="352px" stroke="rgba(76, 61, 104, 0.4)" stroke-width="1"/>
            <g class="kitchen" transform="translate(400,0)">

                <!-- Kitchen elements -->
                    
            </g>
            <g class="flowerpot" stroke="rgba(76, 61, 104, 0.4)" stroke-width="1" >
                <!-- Flowerpot SVG path -->
                <path fill="none" opacity="1"
                    d="M103,171 C 102,207 105,226 118,238 L183,238 C 195,228 200,205 198,170.5" transform="translate(750,113)"/>
                <line x1="852.5" y1="283.5" x2="948.3" y2="283.5" />
            </g>
            <g class="plant" stroke="rgba(76, 61, 104, 0.4)" stroke-width="1" >
                <!-- Plant SVG elements -->

            </g>
        </svg>
      </div>

htmlcsssvgbootstrap-4responsive

Answer №1

If you're unsure about the desired behavior, it's important to clarify that first.

Consider exploring the 

<svg ... preserveAspectRatio="xMidYMid meet">
attribute for more insight.

To have the SVG stretch horizontally to fill the width, adjust the attribute to:

preserveAspectRatio="none"

Alternatively, if you prefer the SVG to enlarge and potentially crop parts of the image at the top and bottom to fill the width, consider using:

preserveAspectRatio="xMidYMid slice"

For additional details on the preserveAspectRatio attribute, refer to this section in the SVG specification.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bringing Vue Components Together in Laravel: A Guide to Component Importation

Recently, I started learning Vue.js and I am looking to understand how to use component. Unfortunately, when I attempted to import my component into another component, it didn't work as expected. The framework I am currently using is Laravel 5.8 and I ...

javascripthtmlvue.js

How to write a more advanced Path for Selenium Chrome WebDriver using C#

I am struggling to find the correct path to click on a specific button on my webpage. To help illustrate, I have provided a sample page for testing purposes. All you need to do is download the HTML file and open it in your browser.Code of HTML page What ar ...

c#htmlseleniumpathselenium-chromedriver

When the form is submitted, use jQuery to smoothly transition the page to a specific

I have a form and a div called "success". When the form is submitted, the "success" div is displayed. I am attempting to make it so that when the form is submitted, the page slides to the "success" div. Here is the code I am using: $.ajax({ type: "P ...

javascriptjqueryhtmlajax

Expand CSS starting from the center to a specific width

I'm currently working on a hover effect that is functioning properly. However, I am attempting to set a fixed width for the blue line, such as a maximum width of 100px. Whenever I try to modify the code below by adding the width constraint, the animat ...

htmlcssanimation

When transitioning to mobile size, I aim to maintain the consistent design of my background-color circle using Bootstrap 5

I am working on creating a card design with a colored background instead of an image. However, I am facing an issue where the rounded-circle background color changes to an ellipsoid shape after passing the mobile size (sm or xs). Here is what I am aiming ...

cssmdbootstrap

When using $.post along with serialize, the post variables and values fail to be sent

I am trying to use jQuery to post data to process.php and then display everything that occurs in the processing file. Currently, I have successfully loaded the file using ajax. For example, when I type echo "Hello world!"; it returns Hello world! Howeve ...

phpjqueryhtmlajax

What is the process for retrieving data from a javascript file that was submitted through a form?

Can you help me with an issue I'm having with this code snippet? <form action="main.js"> <input type="text" required="required" pattern="[a-zA-Z]+" /> <input type="submit" value="Submit" /> </form> After c ...

javascripthtmlformsinputsubmit

Separate your HTML code and move it to a different HTML document within Angular CLI

Is there a way to extract my HTML section from the file app.compontent.ts and place it in a separate HTML document? I've tried adding the HTML code directly into the generated class app.component.ts but it doesn't seem to work. I'd also lik ...

htmlangular

Using jquery/offset to position a div causes it to float, but it does not take

<script type="text/javascript"> $(document).ready(function () { var top = $('#rt_outer').offset().top - parseFloat($('#rt_outer').css('marginTop').replace(/auto/, 0)); $(window).scroll(function (event) { // det ...

jqueryhtmlscrollhashmap

The XML data is valid, however the responseXML property in the XMLHttpRequest response is null

Click here to access the API URL, which returns XML data. However, the responseXML property in the XMLHttpRequest response is coming back empty. How can I retrieve the XML data from the response? document.body.onload = loadXMLDoc(); function loadXMLDoc ...

javascripthtmlxmlxmlhttprequest

The most recent iteration is replacing the previous results on the web

After reviewing the previous question, I have made some adjustments and added additional functionalities. In the previous scenario, the loop was iterating for multiple IPs and a single command. Now, I want the loop to iterate for multiple IPs and multiple ...

pythonhtmldjango

Different position of navigation list-style visible in Chrome browser

Currently, I am working on a website where the main menu navigation is designed using the list-style property to separate each menu item. In Firefox, everything appears as intended with small circles between each menu item. However, when viewed in Chrome, ...

cssmenu

Is there a way to dynamically count the length of an element or class in realtime using JavaScript?

If there are currently 5 divs with the class name "item" and a new unknown number of divs with the same class name "item" are dynamically added in real time, I want my result to display the total number of divs present at that moment (i.e., 5 + n). Note: ...

javascriptjqueryhtmlcss

CompletePage script, individual automatic scrolling

Having trouble with my fullPage.js implementation. I have a total of 5 sections and I'm trying to set different scrolling behaviors for each section. Specifically, I want Sections 1 through 3 to auto-scroll and Section 4.1 to 4.2 to use normal scroll. ...

javascriptjqueryhtmlscrollfullpage.js

Preserving hyperlinks while transferring text from an HTML element using JavaScript

I'm struggling to preserve links from HTML elements while copying rich text, but have been unable to achieve it despite numerous attempts. The following code represents my best effort so far, however it only copies text without maintaining the links ...

javascripthtmltypescript

Interacting with HTML elements in Java programming

I am facing a challenging situation that requires some brainstorming. I would greatly appreciate any advice or guidance in the right direction. My goal is to incorporate a Google Map into my Java Swing project, with the map being specified as a URL wit ...

javajavascripthtmlmaps

Implementing text sliding effect upon hovering over an image using CSS

Is there a way to make text appear when hovering over an image, sliding in from the top and covering only 50% of the image height? Here's the code I have so far: <img style="background-color:#3b283e; float:left;" src="images/f1.jpg" /> <div ...

htmlcsshover

*Arabic text styled in italics using JavaFX*

I'm having an issue trying to italicize Arabic text, It just won't work, I've experimented with different fonts as well, but none seem to be working, Here's the code snippet: import javafx.application.Application; import javafx.scene.S ...

cssjavafxfontsitalic

Leverage the greater than operator within an AngularJS controller

This is the data stored in my controller: $scope.data = [{ "F": "1,26,000" }]; $scope.data2 = [{ "F": "26,000" }]; Now I want to implement an if-else condition using this data: if (Number($scope.d ...

htmlangularjsscopeoperand

The absence of CSV may be attributed to a reference error

I'm new to all of this, so I believe it's a simple mistake on my end, but I can't seem to get it to work. After deploying the code below and clicking on the button, nothing happens. When I inspect the html in my browser, I see an error mess ...

javascripthtmljsoncsvgoogle-apps-script