Hey everyone, I'm a newcomer to the world of React. Currently, I'm working on a website and everything seems to be falling into place nicely. However, I've encountered a little hiccup. My goal is to write code within my SCSS folder that will allow me to declare a div element with specific dimensions (width and height) and then declare a child element inside this div. The purpose is for the child element to automatically resize and center any image placed within the div according to the parent's dimensions. Essentially, the parent div sets the size, while the child element handles the resizing and centering of images. This way, I can easily apply this standard formatting to any image across the site.
I attempted the following:
.container {
margin: 10px;
width: 115px;
height: 115px;
line-height: 115px;
text-align: center;
border: 1px solid red;
}
.resize_fit_center {
max-width:100%;
max-height:100%;
vertical-align: middle;
}
Followed by referencing this in a file named '_other.scss'
This is what I did:
<div class='container'>
<a href='#'>
<img class='resize_fit_center'
src='http://i.imgur.com/H9lpVkZ.jpg' />
</a>
</div>
Unfortunately, this approach didn't yield the desired results, especially when images were contained within other predefined larger containers. Does anyone have any suggestions on how to create a reusable SCSS file that can be applied to images for automatic resizing and centering based on the parent div's dimensions?