Trouble with displaying images in a responsive flex box

I've been trying to make the plant image fit inside the flex boxes with a responsive height and width as the screen size changes, but it doesn't seem to be working. In addition, it's changing the shape of the flex box to accommodate the image size, which is not my intention. The goal is for the image to fit perfectly inside the flex box without altering its shape while still being responsive. What am I missing here? Any help would be appreciated, thank you.

/*Fonts*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600);
@import url(https://use.fontawesome.com/releases/v5.0.8/css/all.css);

/*Body*/
body {
font-family: "Open Sans", Arial, sans-serif;
background-color: #fefefe;
padding-bottom: 3rem;}

/*Profile Picture*/
.profile-picture {
  display: flex;
  margin-top: 55px;
  margin-bottom: 35px;
  display: inline-block;
  width: 125px;
  height: 125px;
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #f1f1f1;}
.image {
  background-image: url('https://www.dropbox.com/s/8dtg60sbha99x2o/Photo%202018-02-05%2C%209%2026%2043%20AM.jpg?raw=1');}

/*Profile Name*/
.profile-name {
  text-align:center; 
  margin-top:-20px; 
  margin-bottom:35px; 
  font-weight:bold;}

/*User Name*/
.user-name {
  text-align:center; 
  margin-top:-30px; 
  margin-bottom:35px; 
  color:rgba(1,1,1,0.35);}

/*Follow Button*/
.follow-button-position {
  text-align:center;
  margin-bottom:55px;
  margin-top:-10px;}
.follow-button {
  text-align:center;
  padding-top:7.5px;
  padding-bottom:7.5px; 
  padding-left:25px; 
  padding-right:25px;
  border-radius:2px;
  background-color:rgba(1,1,1,0); 
  border-style:solid; 
  border-color:#af985a; 
  border-width:1px;
  color:#af985a;}
.follow-button:hover {
  cursor:pointer;}

/*Posts*/
.flex-container {
  display: flex;
  justify-content: center;}
.flex-post {
  background-color: #f1f1f1;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
  flex: 1 0 auto;
  height: auto;
  max-width: 275px;
  align-items: center;
  justify-content: center;
  display: flex;}
.flex-post:before {
  content: '';
  float: left;
  padding-top: 100%;}
.flex-post:hover {
  background-color: rgba(1, 1, 1, 0.5);}


.heart{
    position: relative;
    width: 55px;
    height: 45px;
    float: left;
}
.heart:before,
.heart:after{
    position: absolute;
    content: "";
    left: 24px;
    top: 0;
    width: 25px;
    height: 40px;
    background: white;
    -moz-border-radius: 25px 25px 0 0;
    border-radius: 25px 25px 0 0;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}
.heart:after{
    left: 0;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
       -moz-transform-origin: 100% 100%;
        -ms-transform-origin: 100% 100%;
         -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
}

img {max-width:100%;}
<div class="flex-container">
  <div class="profile-picture image">
  </div>
</div>

<div class="profile-name">
  <p>Cole Gwoz</p> 
</div>

<div class="user-name">
  <p>colegwoz</p>
</div>

<div class="follow-button-position">
  <button class="follow-button">Follow</button>
</div>

<div class="flex-container">
  <div class="flex-post">
    <img src="https://www.dropbox.com/s/4c05cegbonfqo5k/Photo%202018-03-03%2C%202%2020%2022%20PM.jpg?raw=1">
  </div>
  <div class="flex-post"></div>
  <div class="flex-post"></div>
</div>

<div class="flex-container">
  <div class="flex-post"></div>
  <div class="flex-post"></div>
  <div class="flex-post"></div>
</div>

<div class="flex-container">
  <div class="flex-post"></div>
  <div class="flex-post"></div>
  <div class="flex-post"></div>
</div>

htmlcssflexbox

Answer №1

To ensure the dimensions of each box in your example are properly maintained, you can set the container to a relative position and the item to absolute position. This way, the pseudo element will hold the dimensions accordingly.

.flex-post {
  ...
  position: relative;
  overflow: hidden;
}

img {
  position: absolute;
  max-width: 100%;
}

If you want the image to always cover each box, regardless of its size, consider using the object-fit property. Alternatively, you can opt for backgrounds instead of inline images for better browser support by using background-size: cover;.

img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Answer №2

It's a bit unclear if you're referring to the plant image or the profile image, but I'm assuming it's the plant. I made some adjustments that may be what you were looking for, although I can't say for certain. I removed all your code to demonstrate how the plant image will adapt to different browser sizes. Hopefully, this information is helpful to you. Apologies if I didn't fully address your query.

img {
  height: auto;
  width: 100%;
}
<img src="https://www.dropbox.com/s/4c05cegbonfqo5k/Photo%202018-03-03%2C%202%2020%2022%20PM.jpg?raw=1">

Answer №3

It's possible that a potential solution could involve utilizing background-size: contain; in place of background-size: cover;

When using the cover property, there is a chance for images to be resized and stretched.

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

The React task list updates the todo items on change, rather than on submission

As a newcomer to React, I have embarked on the classic journey of building a todo app to learn the ropes. Everything seems to be functioning smoothly except for one minor hiccup: When I input a new todo and hit "submit", it does get added to my array but d ...

javascripthtmlreactjscomponents

Is there a way to prevent hover effects on the outer div when hovering over the inner div?

I am facing an issue with disabling hover effects on an outer div when hovering over an inner button. I have tried various methods but haven't been successful in achieving the desired outcome. .container { background-color: #e6e6e6; width: 400p ...

htmlcsshover

Storing ul and li variables in a database: A step-by-step guide

I came across an interesting example... I have a dropdown menu with images using ul li (in my scenario, there will be a few different menus). Below is the code - where I can add the id to <ul> (however, jQuery uses class instead of id), and data-valu ...

javascriptphphtmljqueryajax

Adjust divs for mobile display using Bootstrap and CSS

I have been struggling with rearranging two divs that are stacked vertically on mobile. I want the second div to appear above the first when the screen size is reduced. Despite trying various methods such as flexbox order and direction, I have not been suc ...

htmlcssbootstrap-4

Guide to placing an image below a <div> using HTML?

Before diving into the creation of my website, I took the time to draft a wireframe using Balasmiq. You can take a look at the wireframe here. Upon reviewing the wireframe, you'll notice that the first section bears a semblance to this layout: https:/ ...

htmlcssbootstrap-4

Examples of merging responsive design and equal height columns in CSS:

As a beginner in CSS, I am facing challenges in creating a responsive layout that adjusts based on the screen it is viewed on and achieving equal heights in columns. While I have been able to address these issues individually, combining them has proven to ...

htmlcsslayoutresponsive

A guide on retrieving <div> element in a WordPress function PHP file

How can I wrap a div around the output from this code snippet? add_filter( 'the_content', function( $content ) { if (is_singular('cda')) { return get_the_term_list( get_the_ID(), 'cda_cat', 'Product:' ).$con ...

phphtmlwordpressfunction

How is it possible that this component is able to work with slotting without needing to specify the slot name

I have created two Web Components using Stencil.js: a Dropdown and a Card. Within my Dropdown, the structure is as follows: <div class='dropdown'> <slot name="button"/> <slot/> </div> The nested chil ...

javascripthtmlstenciljsslotslots

Jquery method to extract and modify text within an HTML opening tag

As an example, let's consider <img onclick="remClicked(this)" src="~/images/chrest.png" /> I am interested in replacing onclick="remClicked(this)" src="~/images/chrest.png" with another text using either javascript or jquery. Is this possible? ...

javascriptjqueryhtmlasp.net-mvc

One-click process succeeds where two clicks fail

The code below is intended to go through a two-click process as follows: First click on .imagenes decreases opacity and makes .logo visible. Second click on .imagenes returns the opacity to 1 and hides .logo again. However, during this cycle of two ...

javascripthtmlcss

Is it feasible to automate the cropping process with selenium?

Exploring a new challenge: simulating a cropping feature. I understand that replicating human cropping is impossible, but the image I intend to crop remains a fixed size each time I run the test. My goal is to establish the cropping WebElement at a constan ...

cssseleniumselenium-webdriver

Utilizing Bootstrap to arrange table cells in a shifted manner

I'm new to utilizing bootstrap in web development. I've been exploring various examples of bootstrap templates that include tables, and I noticed that when I resize my browser window, the table adjusts accordingly. Now, I'm curious to know ...

javascriptjquerycsstwitter-bootstrap

Customize the background color of selected date in MUI DatePicker 6.19.7 with sx styling

Looking to update the color of a specific element highlighted by an arrow using sx{} DatePicker <LocalizationProvider dateAdapter={AdapterDayjs}> <DatePicker className={styles.picker} ...

cssreactjsmaterial-uidatepickercalendar

Is the modal popup displayed in the center of the screen when the submit button is clicked?

My bootstrap modal popup is not working when I click the submit button. I can only use Bootstrap4, JS, and jQuery3.0. JS Fiddle function check() { var inputs = document.getElementsByTagName("input"); var inputs = document.getElementsByTagName("sele ...

htmlcssbootstrap-4

Removing specific characters from HTML code with ASP

Can someone help me understand how to make the page display HTML code while excluding specific characters like this one (ü)? ...

c#asp.nethtmlcharacter-encoding

`Can a creation of this nature be accomplished?`

In my text input field, users can type messages to send to me. I'd like to add buttons on the page with symbols like "!", "XD", and "#". When someone clicks on a button, such as the "!" button, that corresponding symbol should be inserted into the tex ...

javascripthtmlcss

layering information on the backstretch

My goal is to include a div with a specific title above the JQuery Backstretch images. The current code setup is as follows: <div class="col-md-4 col-xs-12"> <div class="imgs"> </div> </div> When I try to insert any conten ...

javascriptjquerycssjquery-backstretch

Positioning multiple images in CSS

I am facing an issue with my background images where one of them is invisible and cannot be displayed. Additionally, the padding-top for the li a element seems to not be working properly. HTML: <ul class="menu"> <li class="item-101 current a ...

css

How do I enable alt text visibility for images in my WordPress theme Kallyas?

I am currently in the process of making my company's website more inclusive by ensuring all images have proper alt text. However, I am facing a challenge in seeing the alt text that I add through the WordPress CMS when viewing the HTML code. Please re ...

htmlwordpressaltwcagaccessible

Exploring Navigation States with JQuery: Active, Hover, and Inactive

I've been struggling with the code below as it doesn't seem to be working. I had a simpler code before for swapping images, so if there's an easier way to achieve this, I'm open to suggestions. Just to recap, I'm trying to: 1. La ...

jquerycssmenuhover