The React-bootstrap Modal encounters issues when handling image content and scaling for mobile display compatibility

Can someone please assist me with displaying the full image of a small image located in the gallery?

Whenever I try to scale the display, the Modal automatically resizes but the image does not resize accordingly. The image ends up overlapping when scaling.

Even after removing the width attribute, it is still not working.

function CenteredModal(props) {
    return (
        <Modal
            {...props}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
        >
            <Modal.Header closeButton>
                <Modal.Title id="contained-modal-title-vcenter">
                    Decoration
          </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <img src={G1s} alt="G1s" width="1080" />
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={props.onHide}>Close</Button>
            </Modal.Footer>
        </Modal>
    );
}

function Example() {
    const [modalShow, setModalShow] = React.useState(false);

    return (
        <>
            <img src={G1} alt="G1" width="200" onClick={() => setModalShow(true)} />

            <CenteredModal
                show={modalShow}
                onHide={() => setModalShow(false)}
            />
        </>
    );
}

https://i.sstatic.net/Vp4Sv.jpg

https://i.sstatic.net/vCLN8.png

Answer №1

Use this specific style on the image element

<img src="..." className="img-fluid" > 

This is the standard class recommended by Bootstrap to ensure responsiveness.

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

Selenium: Interacting with a React button

Trying to automate testing for my school project's react site has been quite a challenge. The first page loads smoothly and I can successfully enter a password and submit it. However, the second page is where things get tricky - there are multiple but ...

Customize Text Style in Material-UI and Next.js

Hi! I'm currently working on a new web project and looking to switch the font to Oswald (). My tech stack includes NextJS with MUI for the components. I've been struggling to find a solution on how to make this change successfully. Any guidance ...

Positioning of DIV elements in relation to each other

I'm currently enrolled in Codecademy's HTML & CSS course and I'm finding the topic of positioning a bit perplexing. Here is an example of my HTML file: <!DOCTYPE html> <html> <head> <style> div { pos ...

How to effectively implement React Context with the useState hook in a TypeScript project

I've been working with code that resembles something like the following: SomeContext.ts: export interface SomeContext { someValue: string; someFunction: () => void; } export const defaultValue: SomeContext = { someValue: "", som ...

ApolloClient encounters type mismatches with ApolloLink

Struggling with creating ApolloClient using TypeScript, encountering type-errors that I'm unable to resolve. Seeking guidance on what steps to take next. Provided below is a snippet of the code (functions fine with JavaScript) for setting up the clie ...

Exploring the capabilities of router.replace: Tips for implementing a redirect directive

Embarking on my journey to master Next.js. I currently have a login handler structured as follows: import { LOGIN_TOKEN_KEY, REDIRECT_PATH } from "lib/config" function Login() { const client = useApolloClient() const [login, { loading }] = ...

The box shadow feature does not function properly when the position is set to sticky

Applying position sticky to th and td in the example below seems to be causing issues with the box shadow not working. Can anyone provide insights on why this is happening? <div class="overflow-x-auto lg:overflow-visible"> <div> <t ...

The sticky navigation bar becomes fixed at the top prematurely

Having a sticky navbar on my Bootstrap-based website, I've implemented the following jQuery code: $(document).ready(function () { var flag = false; function stickNav() { $(".navbar-default").affix({ o ...

Can you explain how to designate a port number for a create-react-app project in a production environment?

I am in the process of deploying a website with several react projects created using create-react-app. Each project will have its own webpage format, for example: mywebsite.com/project1, mywebsite.com/project2. I am currently setting up an nginx reverse pr ...

Developing with ReactJS involves sending a POST request

My attempts at creating a POST request in ReactJS have been unsuccessful, as I keep receiving the error: POST http://localhost:3000/ 404 (Not Found) This has been frustrating me for over 4 hours now, and I can't seem to figure out what I'm doin ...

Tips for aligning three <p> elements side by side using flexbox

I need assistance with aligning three boxes next to each other, each containing an image, header, and text. The issue arises when resizing the browser, causing the content in box 2 and 3 to be positioned higher than box 1. Below is the code I have been us ...

PHP dropdown menu is a dynamic feature that provides users

Can anyone help me identify the issue with this code? I am struggling to display the sub menu... I suspect the problem lies in the section where I retrieve the sub menu from the database. However, upon inspection, everything seems correct... It's po ...

Choose an option from a Material UI Listbox with Autocomplete feature using Cypress

This specific element is crucial for the functionality of the application. <input aria-invalid="false" autocomplete="off" placeholder="Category" type="text" class="MuiOutlinedInput-input MuiInputBase-input ...

Webpack encountered an error while compiling and is currently working on integrating a searchbox component

Recently, I attempted to incorporate react-search-box into an ongoing project. However, upon starting the integration process, I encountered the following error: ERROR in ./~/react-search-box/dist/styles.css Module parse failed: C:\Users\User&bs ...

SVG files do not fetch external CSS stylesheets when embedded in the DOM

Take a look at this example on jsFiddle. When using IE, the external CSS is loaded and the rectangle is red, but in Chrome and FF the rectangle stays black. What causes this difference? <!-- Used for referencing the external css --> <?xml-styl ...

How to position multiple CSS background images effectively?

Greetings all! I'm seeking advice on how to add a background image to the right of the description and left of the first post column. Any tips on proper placement? Appreciate any help :) ...

Creating a draggable dialog with material-ui

Currently exploring the material-ui Dialog feature. Material-UI Dialog documentation Attempting to make the dialog draggable across the viewport seems not supported in material-ui by default, as highlighted in this issue. Experimenting with react-dragga ...

Ensuring Safe Definition of HTMLCollectionOf Elements in TypeScript with React

I'm currently working on creating a d3 line chart using react and typescript, and I'm using https://bl.ocks.org/larsenmtl/e3b8b7c2ca4787f77d78f58d41c3da91 as a reference for implementing the mouse over functionality. During one step of the proce ...

Retrieving a specific data point from the web address

What is the most efficient way to retrieve values from the window.location.href? For instance, consider this sample URL: http://localhost:3000/brand/1/brandCategory/3. The structure of the route remains consistent, with only the numbers varying based on u ...

What is the best way to incorporate async/await in a useEffect hook in a React Native application?

Upon executing useEffect, my objective is to retrieve the token from AsyncStorage, fetch the data value using the axios.post('/auth/me') endpoint, and trigger the KAKAOLOG_IN_REQUEST action through dispatch. After verifying that the data value i ...