Enlarge my image to better fill the container

Does anyone know how I can achieve a zoom effect on my image like the example shown below?

I am open to using px for sizing, but it seems to be causing more issues. Any assistance would be greatly appreciated.

This is the code I currently have:

.food-container {
  display: flex;
  border-radius: 10px;
  background-color: orange;
  height: 250px;
  width: 750px;
  border: 1px solid black;
}

h1 {
  font-weight: 800;
  font-size: 2.3rem;
  margin-bottom: 30px;
}

.left-side {
  width: 66%;
  padding: 10px 20px;
}

.left-side>p {
  font-size: 1.1rem;
}

.right-side {
  width: 34%;
  text-align: right;
}

.right-side>img {
  width: 100%;
  height: 250px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
<div class="food-container">
  <div class="left-side">
    <h1>Get your first meal for free!</h1>
    <p>
      Healthy, tasty and hassle-free meals are waiting for you. Start eating well today. You can cancel or pause anytime. And the first meal is on us!
    </p>
  </div>
  <div class="right-side">
    <img src="https://images.unsplash.com/photo-1653256513370-8d0d519b9477?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1622&q=80" alt="" />
  </div>
</div>

The image appears distorted in this manner, but I'm not sure why. Thank you for any help in advance.

htmlcss

Answer №1

Your code looks great, just a small addition was needed. Make sure to include object-fit: cover, which will adjust the image to maintain its aspect ratio while filling the width and height of your div.

Additionally, consider using object-position to reposition your image within the container.

.food-container {
  display: flex;
  border-radius: 10px;
  background-color: orange;
  height: 250px;
  width: 750px;
  border: 1px solid black;
}

h1 {
  font-weight: 800;
  font-size: 2.3rem;
  margin-bottom: 30px;
}

.left-side {
  width: 66%;
  padding: 10px 20px;
}

.left-side>p {
  font-size: 1.1rem;
}

.right-side {
  width: 34%;
  text-align: right;
}

.right-side>img {
  width: 100%;
  height: 250px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  object-fit: cover;
}
<div class="food-container">
  <div class="left-side">
    <h1>Get your first meal for free!</h1>
    <p>
      Healthy, tasty and hassle-free meals are waiting for you. Start eating well today. You can cancel or pause anytime. And the first meal is on us!
    </p>
  </div>
  <div class="right-side">
    <img src="https://images.unsplash.com/photo-1653256513370-8d0d519b9477?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1622&q=80" alt="" />
  </div>
</div>

Answer №2

Simply add object-fit: cover to make the image fill the available space.

.food-container {
  display: flex;
  border-radius: 10px;
  background-color: orange;
  height: 250px;
  width: 750px;
  border: 1px solid black;
}

h1 {
  font-weight: 800;
  font-size: 2.3rem;
  margin-bottom: 30px;
}

.left-side {
  width: 66%;
  padding: 10px 20px;
}

.left-side>p {
  font-size: 1.1rem;
}

.right-side {
  width: 34%;
  text-align: right;
}

.right-side>img {
  width: 100%;
  height: 250px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  object-fit: cover;
}
<div class="food-container">
  <div class="left-side">
    <h1>Get your first meal for free!</h1>
    <p>
      Healthy, tasty and hassle-free meals are waiting for you. Start eating well today. You can cancel or pause anytime. And the first meal is on us!
    </p>
  </div>
  <div class="right-side">
    <img src="https://images.unsplash.com/photo-1653256513370-8d0d519b9477?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1622&q=80" alt="" />
  </div>
</div>

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

What is the best way to transform URL images on a webpage into media library images in WordPress?

Having trouble converting HTML Static Sites to WordPress because images are hosted through HTML SRC Code. After conversion, no one can see the images in visual format on pages during editing. Is there a way to convert all image links inside pages to media ...

phphtmlcsswordpress

Filling a blank table using jQuery

I am attempting to search for an item by sending a GET request to my service and then populating my table with the response, but I am struggling to achieve this with my current code. $(function(){ var $searchInput = $("#search"); $("#searchOptions").c ...

jqueryhtmlhtml-table

Storing the $_session['username'] variable within an ajax function

I've been working on a script and I've reached the point where I need to add protection. However, I'm having trouble retrieving the $_session['username']. I can't use cookies because they are vulnerable to being faked, posing ...

phpjavascriptmysqlhtmlajax

Display the latest tooltip in a Tree view

I have developed a unique custom component to incorporate tooltips for each individual node within a Tree. function StyledTreeItem(props) { const { nodeId, labelText, tooltipTitle, ...other } = props; return ( <Tooltip title={tooltipTitle} placem ...

cssreactjsmaterial-ui

Material UI grid with 2 items: one aligned to the left and one aligned to the right in a single line

I'm struggling to understand how to effectively utilize Material UI's flexbox integration. I want to align items in a specific way, like this: export default function Home() { return ( <Grid container justify={"space-between&q ...

htmlcssflexboxmaterial-ui

Encountering an "unexpected token" error while utilizing the JSOP API in a ReactJS application

I am facing an issue while fetching data from a JSON API, as it is throwing an "Unexpected token" error. Below is the code that I have tried so far. Any help in resolving this problem would be greatly appreciated. Below is the code snippet: var Demo = Re ...

javascripthtmljsonreactjs

Modify the width of a div element by clicking on it using Javascript

I need to achieve three tasks onclick: change the display:none property of the element with id="notes_content" to display: block modify the width of the element with id="oct" from 1190px to 550px update the width of elements with class="oct_days" from ...

javascripthtmlonclick

Experiencing difficulties with the background image in a specific section

I am facing a simple issue that I can't seem to solve. My goal is to have a gif as the background, showing flowers growing, with a campaign logo and a donation button overlay. However, there seems to be an issue with the background getting cut off at ...

htmlcss

Obtain the text value from an HTML button in JSP code

Here is an HTML tag that I have: <button type="submit" name=<%=s %> value=<%=s %>><%=s%></button> The <%=s %> represents a String with white spaces stored on the server, such as "file one". I am facing an issue with e ...

javahtmljsp

Display title using a jQuery toolbar

Looking to spruce up a Toolbar with a title using jQuery UI. This is what I have so far: HTML: <div class="demo"> <span id="toolbar" class="ui-widget-header ui-corner-all"> <label>go to beginning</label> <button id= ...

jqueryhtmlcssjquery-uitoolbar

Ways to retrieve form data following a post request using JavaScript

Does anyone know how to read form data from testPage.html in testPageResult.html? I have created a html page called testPage.html with a form that has a post action like the following: <h2>HTML Forms</h2> <form action="http://test.com/tes ...

javascripthtmlformsxmlhttprequest

Fluid 'If Contains'

As a beginner in the coding language, I am attempting to accomplish what may be a challenging task. However, I am determined to give it a try. I have dispatch notes that I want to display an image for express delivery to make it easily noticeable. The dis ...

htmlliquid

Is there a way to identify a null dynamic source in Html5 audio?

The HTML5 audio element in my code does not point directly to an mp3 file, but rather to an action in a controller. This action returns either an mp3 file (FileResult) or null, which can take up to 1 minute to retrieve. To handle this delay, I have impleme ...

jqueryhtmlasp.net-mvcgoogle-chromehtml5-audio

Applying an external style sheet to customize the appearance of all .net textboxes throughout a webpage

I am having trouble styling some textboxes in my project. While everything looks good in design view, the CSS doesn't seem to be applied when I debug. Here is the CSS code: input.textbox { color: #C0C0C0; text-align: center; } And this is how I hav ...

csswebforms

Reset the dropdown list back to its initial state

I am facing an issue with two dropdown lists in my view. When I change the value on the first one, it should update the second one accordingly. Initially, this functionality works fine with the script provided below. However, if I change the first dropdown ...

javascriptjqueryhtmlasp.netasp.net-mvc

Is there a way to extract a variable's value from the URL and distribute it to all links across the website, excluding those on the homepage?

Recently, I was attempting to achieve something similar to this concept how to retrieve variable values from the URL and pass them to all links on a website? However, I encountered an issue where simply visiting the homepage or any other page without the ...

javascriptphpjqueryhtmlvariables

How can I dynamically update a div without refreshing the page by using an onclick event on a

When working on my project, I found helpful insights from this Stack Overflow thread. The structure of template-comparison.php involves fetching code from header.php to ensure the page displays properly. However, the actual "fetch code" process remains un ...

javascriptphpjqueryhtml

Incorporate Vimeo video with full-width display

When embedding a Vimeo video on my website, I use the following code: <div class="fys-fp-content-wrapper"> <div id="fys-fp-video"> </div> </div> #fys-fp-video { position: relative; padding-bottom: 56.25%; padding-top: ...

htmlcssvideovimeo

Incorporating text onto an HTML webpage

Context: My program reads a file and displays it on an HTML page. The code below utilizes regex to extract errors from the file. Instead of using console.log for debugging, is there a way to display the results on the HTML page? When attempting: document ...

javascripthtmlregexangularjswhile-loop

Enhancing User Experience with CSS Transitions for Faster Page Loading

Recently, I stumbled upon a captivating website that has left me in awe - . The mesmerizing aspect of this site lies in the seamless and fluid animations that gracefully transition when navigating between pages. I find myself yearning to understand the int ...

jquerycss