score:1
i believe this is, at core, an xy problem. you're asking how to technically achieve a nearly impossible task (1) when you're actually trying to answer another question: how to make some text and an image look good side by side (2) (which, by and large, is not an actual coding problem - it's a graphical design problem).
most notably, you're not providing either the text or the image, so you're asking for a general solution, which would work in all cases. that solution doesn't exist. picture how the result would look if the text was 1 letter long and how it would look if it was 2 pages long.
last, but not least, the problem is not strictly related to react. in general, you should ask yourself:
- is this achievable in dom (html + css + js)?
- does it need js?
- once you answer both of the above with "yes", and you know how the output should look like, the react part is generally easy.
in more detail...
(1). when you're changing the image size, provided you maintain its ratio, you're going to affect the paragraph's width, causing it to re-wrap, changing its height, potentially creating a loop. in many cases, you'd need to re-run the script multiple times until the text no longer re-wraps when adjusting the image height.
- in some cases, depending on the amount of text, a solution doesn't even exist.
- in other cases, the script will jump between two positions, basically two different numbers of text rows, each resizing the image, causing the text to jump to the other number of rows, causing the whole thing to tremble indefinitely. i've actually seen this quite a few times, on production websites. the general fix is to record each resizing step and, should the script get any of the previous values, kill it. an ugly fix for an ugly bug.
- and, in some other cases, you might find multiple possible "solutions". which one should the script pick?
picture all this in the context of resize events (a user flipping their tablet from landscape to portrait and back) and you got a recipe for disaster, ux-wise.
not to mention browsers nowadays allow users to override font-size or font-family, giving control over readability. how would your script cope with this change?
(2) how this problem is typically solved.
there are a few distinct considerations:
- the image needs to have a minimum size, at which it conveys whatever message it carries. it needs to remain "readable" at all times. not too small, but not too large, either. it has to be in balance with the amount of text.
- if there's too much text, you either make its box scrollable (depending on case) or you crop the sides of the image (if image is "croppable" - from a graphical pov).
- the text needs to remain readable (with ease) at all times (lines shouldn't be too long or too short)
- typically, you want to roughly determine a ratio between the minimal image size and a paragraph width good for readability and set a consistent ratio (throughout the whole app/website) between the two (design consistency pays off in how your website is perceived as a whole - it provides rhythm and an overall feeling of confidence and reliability, when done right). go with 1:1, 2:1, 3:1, 1:2, 1:3, based on paragraph length and readability. another good ratio is 1:1.618 (the golden ratio - it's pleasing to the eye, without an exact explanation - debugging humans is particularly difficult)
- a typical solution is to wrap the paragraph into a slightly bigger, visible box, with a slightly different background or border color. this gives you significantly more flexibility in matching the image height. see the examples below.
- below a particular container width, you want the two elements (the image and the text box) to wrap, so they both remain readable and attractive (e.g: responsiveness)
a few bad examples you probably want to avoid (but you're currently asking for), followed by a possible answer to the y problem:
.container {
display: flex;
max-width: 600px;
margin: 0 auto;
margin-top: 1rem;
justify-content: space-between
}
.proper img {
width: 50%;
}
.proper div {
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
padding: 2em;
}
.proper.two div {
background-color: transparent;
border: solid #ddd;
border-width: 1px 0 1px 1px;
}
<div class="container">
<h3>what you probably don't want</h3>
</div>
<div class="container">
<div>spiff up your work with our random beer lorem ipsum generator. beer!</div>
<img src="https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg" style="max-width: 528px">
</div>
<div class="container">
<div>spiff up your work with our random beer lorem ipsum generator. beer!
</div>
<img src="https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg" style="max-width: 515px">
</div>
<div class="container">
<div>spiff up your work with our random beer lorem ipsum generator. beer!
</div>
<img src="https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg" style="height: 1em">
</div>
<div class="container">
<div>spiff up your work with our random beer lorem ipsum generator. more beer!
</div>
<img src="https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg" style="height: 2em">
</div>
<div class="container">
<h3>what you probably want</h3>
</div>
<div class="container proper">
<div>spiff up your work with our random beer lorem ipsum generator. beer!</div>
<img src="https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg">
</div>
<div class="container proper two">
<div>spiff up your work with our random beer lorem ipsum generator. beer!</div>
<img src="https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg">
</div>
as a bonus, what golden ratio can do for you:
* {
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0 2.1rem;
}
.container {
padding: 2.1rem 0;
max-width: 500px;
margin: 0 auto;
min-height: 100vh;
display: flex;
align-items: center;
}
.golden-ratio {
border-radius: .35rem;
overflow: hidden;
display: flex;
justify-content: space-between;
background-color: white;
color: #aaa;
aspect-ratio: 1.618;
box-shadow: 0 1px 5px 0 rgb(0 0 0 / 10%), 0 2px 2px 0 rgb(0 0 0 / 07%), 0 3px 1px -2px rgb(0 0 0 / 06%)
}
.image-container {
flex-grow: 1;
background: #ddd url('https://random-ize.com/lorem-ipsum-generators/beer/suds3.jpg') 100% /cover;
}
.content {
flex: 0 0 61.8%;
font-size: 1.5rem;
font-style: italic;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10%;
}
@media (max-width: 600px) {
.golden-ratio {
flex-direction: column-reverse;
aspect-ratio: unset;
}
.content {
flex-basis: 50%;
padding: 3rem;
font-size: 1.2rem;
}
.image-container {
aspect-ratio: 4.16;
flex-basis: 50%;
}
}
<div class="container">
<div class="golden-ratio">
<div class="content">spiff up your work with our random beer lorem ipsum generator. beer!</div>
<div class="image-container"></div>
</div>
</div>
Source: stackoverflow.com
Related Query
- Can't access useRef() value due to render timing
- Access state value inside render method in reactjs
- useRef value is undefined on initial render
- In React-Hooks UseRef i cant get the new state value
- Cant use variable from React Context to access value of object
- Cant access object value returned from axios in custom hooks
- How can I access data attribute value using useRef hook?
- With React, how to access the render return value of a child component
- Cant render object value
- I want to render current timing value to HTML at interval of every seconds in reactjs
- Need to access useState value within a useEffect, but cant put it in dependency arr because socket.io
- Access React Context outside of render function
- Cannot render boolean value in JSX?
- React, how to access the DOM element in my render function from the same component
- Cannot access page on Refresh due to Hasbangs in a React SPA
- Change input value with useRef
- How do I access current value of a formik field without submitting?
- React: why is that changing the current value of ref from useRef doesn't trigger the useEffect here
- React.js How to access to input value in child component
- how to use useRef to reference latest value
- Get React.refs DOM node width after render and trigger a re-render only if width has value has changed
- useRef to store previous state value
- TypeScript React: RouteComponentProps types error or cant access history
- Interval inside React useEffect - store it in a useRef Hook to preserve value overtime warning
- Cannot access DOM with server-side render - react 0.14.1, react-dom 0.14.1 and react-router 1.0.0-rc3
- How to access prop value in react-testing-library
- Display Animated Value in React Native Render Text Component
- React on render shows previous state value
- How to access provider value when using useContext hook
- Render React element from object value
More Query from same tag
- React - handleChange of multiple inputs by one function
- Change the value into the react select menu item does not populated into the react material-ui
- React: input validation
- Call component method from React fetch
- React Hooks : mapping data from api call to render pie chart
- Passing react props as object
- Import scss file is not working inside storybook file
- I have set the headers then also CORS policy error is there(ReactJS)
- CSS not applying to ReactMde
- Add additonal class names to custom React component
- how to empty an array of objects in react
- Creating dynamic table, Object.keys not allowing to return rows of table react
- How to handle local state when using relay?
- Why is node.appendChild() not working?
- React native - objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store})
- Why does material UI react stepper doesn't have tab focus?
- How can i set value in nested object in React?
- How to create a specified callback function for a setState in React Functional Component
- Testing React componentWillUnmount using Jest
- How to include local script file on React page?
- ES6, REACT error message I do not understand
- React JS: Differentiate between Click and Click + Shift event
- How do i pass from a class component to a separate api component the search input
- How can checkboxes be sorted (based on true-false status) in react-table?
- Ant Design/antd calendar not working inside a modal
- Set default value to filter
- React prop gets overwritten when using highcharts?
- react-select multiple options grouped have object as value
- Changing the state of one component that gets declared multiple times in React - Better Practices?
- Stateless Functional Component - React