My app was developed using the react-bootstrap framework.
Within one of my components, I have an image tab structured like this:
render() {
return (
<div id="homePage">
<div class="hero">
<Image src="/images/welcome-page-pic.jpg" responsive />
</div>
</div>
);
Interestingly, in this framework, the tag for inserting images is "Image" instead of the usual "img".
Although the default display works, it lacks responsiveness. To address this, I experimented with different styles in the dev tools and discovered that setting the image as a background image in CSS, like so, achieved the desired result:
.hero {
background-image: url(/images/welcome-page-pic.jpg);
height: 400px;
background-size: cover;
background-position: center right;
}
In order to implement this styling, I had to remove the image tag and the src attribute entirely. However, adding these styles directly to the JSX or HTML caused issues with the page not loading properly. Even leaving the original image code intact and just applying the CSS without the background-image property did not work. It's unclear whether this difficulty stems from a mistake on my part or a limitation of the framework. Any insights would be appreciated.
UPDATE: Further investigation revealed that, inexplicably, my local host was failing to apply the class "hero" to the nested div. Manually adding this class in the dev tools resulted in the image displaying correctly according to the desired styling. The next question is why the class assignment isn't happening automatically when the JSX is loaded initially.