I am experiencing issues with resizing my image within the CSS flexbox layout

I attempted to create a flex container for my jpg file in HTML but ran into an issue. Even after adding image dimensions in CSS, the image remained the same size with no changes at all.

    </head>
    <div class="flex-container">
        <div class="row">
            <img src="images/1706810157558.jpg">
        "</div>
    <div></div>
    </div>

I made several attempts by using the following code:


.img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
}
.flex-container {
    width: 300px;
    height: 300px;
    object-fit: cover;
}

.container {
    display: flex;
    flex-direction: row;
}

Currently working on an about page for my design portfolio website and trying to make the face smaller. However, the result still appears unchanged like in this [this]

htmlcssimageflexboximage-resizing

Answer №1

I noticed a few syntax errors in the code you shared, as well as an incorrect usage of the object-fit property within the .flex-container class. Once these issues were corrected, the image displayed correctly according to expectations. Here's an updated snippet with the fixes:

.img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.flex-container {
  width: 300px;
  height: 300px;
}

.container {
  display: flex;
  flex-direction: row;
}
<div class="flex-container">
  <div class="row">
    <img src="https://www.w3schools.com/html/img_chania.jpg">
  </div>
</div>

If this revised code doesn't align with your desired outcome, providing more specific details about your goal would greatly aid in resolving any discrepancies.

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

Ensure that the width and background fill the entire viewport with CSS

Hi there, looking for some assistance. I'm in the process of updating my online portfolio located at www.pxlmin.com/portfolio My issue is with the background color on my page. Currently, it fills the entire width as desired. However, when I resize th ...

css

Tips for creating clickable hyperlinks within a chat platform

I'm currently working on a chat feature for my website that pulls messages from a JSON file and displays them using Vue.js. The issue I'm facing is that when a user includes a link in their message, it does not automatically become clickable beca ...

htmljsonvue.js

The text alignment in Internet Explorer is off

After testing this website on both Firefox and Chrome, the alignment in the "Releases" section appears to be correct: However, when viewed in Internet Explorer, some of the text seems to be aligned in the center for unknown reasons. I have been struggling ...

htmlinternet-explorercssalignment

Styling elements based on their index in R Shiny

In my R Shiny app, I am looking to color elements based on their index number (first element blue, second yellow, third red). Here is a reproducible example: library(shiny) ui <- fluidPage( tags$style(".control-label:nth-of-type(1) {background-colo ...

cssrshiny

Scraping content using xpath in a complex html layout

I have a large amount of HTML code that I need to process using XPath. There are two different ways in which the text "The Text" can appear: <div> The Text </div> <!-- OR --> <div> <span>The Text</span> </div> ...

htmldomxpath

Invoking a function within an HTML file does not result in triggering an alert message

Hello everyone, thank you for taking the time to look at this. I'm attempting to execute a javascript function when I click on the update button. Here is the javascript code: var text2Array = function() { // This function takes the value from the t ...

javascripthtml

Creating a dynamic form that efficiently captures user information and automatically redirects to the appropriate web page

Sorry for the unusual question, but it was the best way I could think of asking. I have come across websites with fill-in-the-blank lines where you can input your desired information and then get redirected to another page. For example: "What are you sea ...

javascripthtmlcsswordpress

The positioning of the Bootstrap 4 sidenav on mobile devices is different from the left side

Hey there! In my current project, I've got a left sidebar that contains various menu items. The code for my sidebar looks like this: html { height: 100%; } body { min-height: 100vh; } /* fixed and fluid only on sm and up */ @media (min-widt ...

htmlcssbootstrap-4sidebar

Getting creative with jQuery: Adding a random class using addClass()

The html/css: <style> div.myWords p { display: hidden; } p.show { display: block; } </style> <div class="myWords"> <p>Hello</p> <p>Hola</p> <p>Bonjour</p> </div><!-- myWords --> Is ther ...

jqueryhtmlcss

Navigating through the webpage using CSS gradient backdrop

Check out this page. Under the "Pedidos" section, there is a scrolling area with a gradient background. The issue I'm facing is that I want the background to continue scrolling and repeating as I scroll down the page, but it remains fixed. I tried the ...

htmlcss

What is the correct way to display a URL in Jupyter Lab?

This is a direct link for searching the keyword "google" on google.com: https://www.google.com/search?q=google&rlz=1C1CHBD_elGR899GR899&oq=google&aqs=chrome..69i57j69i60l4j69i65l2j69i60.1647j0j7&sourceid=chrome&ie=UTF-8 When I run the ...

pythonhtmljupyter

Is the Ajax call being triggered unexpectedly?

I've been working on an Ecommerce website and everything was going smoothly until the update_cart (quantity) code started submitting my form instead of updating it. I've tried making changes and even moving it outside the form, but the issue rema ...

phpjqueryhtmlajaxforms

What is the best way to create a table of buttons with seamless integration, leaving no gaps between each button?

While developing a website, I encountered an issue where I couldn't figure out how to eliminate gaps between buttons. Despite searching online for a solution, I struggled to articulate my problem clearly. Essentially, I am trying to create a table lay ...

javascripthtmlcssbuttonhtml-table

Identify the element with the active class name as the primary focus

Can anyone assist with this issue? Below is an example of the code I am working with: import React, { useRef, useEffect } from "react"; function App() { const inputRef = useRef(null); useEffect(() => { const testElement = document.qu ...

htmlcssreactjsjsx

Include token in src tag requests Angular version 8

In the process of developing a website, I have encountered a challenge. I am creating a platform where users can access another website I am currently working on after they log in. Once authorized, users receive a JWT token which is sent in the header with ...

javascripthtmlangularasp.net-core

Tips for showcasing information beneath a title on a webpage in Yii2 without duplicating the header

Looking to pass an array to my view that includes headings and corresponding content lists. The structure of my array is as follows: Array ( [0] => Array ( [trimester] => Trimester1 [subject] => ABC ) ...

htmlarraysfor-loopforeachyii2

Enhancing the existing site with a new sidebar column in the HTML layout

My website has a structure like this: <body> <div id="header">...</div> <div id="content">...</div> <div id="footer">...</div> </body> The layout consists of floats, clears, margins, and paddings in t ...

csscss-floathtmlhtml-table

Is there a method for redirecting my page to a specific href link without triggering a page reload?

This is my HTML code. <a href="http://127.1.1.0:8001/gembead/emstones.html?car=36">Car</a> I am trying to redirect to a specific page with parameters without fully reloading the current page. Is there a way to achieve this task? I believe the ...

javascripthtmlajaxhttp-redirect

The tag's onclick function that was dynamically created was not triggering in jQuery

I created a web application using jquery mobile and ran into an issue. I am trying to call a function by clicking on a dynamically generated anchor tag, but it's not working and showing an error that the function is not defined. Any assistance on this ...

javascripthtmljqueryjquery-mobile

"Ensure that the horizontal border line is properly aligned with the header div

I have a CSS-defined header with the following properties: .page-header { display: flex; flex-direction: row; justify-content: space-between; align-content: stretch; align-items: center; padding: 5px 5px 5px 20px margin-left: auto; margin-r ...

htmlcssreactjsalignment