Stylish CSS Card with set height and adaptive image

Looking for a way to set a fixed height for a file input with preview? Check out this Codepen example:

Codepen

In the HTML (vue component), there is a card element with an image that maintains its aspect ratio. However, you may want to fix the height of the component to 300px while keeping the right aspect ratio of the loaded image, filling any gaps with a grey background.

<div id="">
  <div class="field-body row">
    <div class="col-md-6">
      <div class="card" style="height: 400px">
        <div class="card-image">
          <figure class="image imup-image" style="padding-top: 75%">
            <img src="http://www.lagom.nl/lcd-test/img/gamma-test-2.png">
          </figure>
        </div>
        <footer class="card-footer">
          ...
        </footer>
      </div>
    </div>
  </div>
</body>

The CSS includes styling for the figure, custom file label, buttons, and more to ensure the image remains centered and fits within the specified dimensions.

Feel free to test the component and see how it maintains the image's aspect ratio while also exploring options to force the height as desired.

cssvue.js

Answer №1

Have you experimented with the object-fit and object-position CSS properties for your image? These rules might help resolve the issue you are facing.

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

Styling a div to wrap around an image

I'm working with an image element that has the style attribute set to style='width:40%;height:40%'. My goal is to add a div around this image that will automatically adjust its size to wrap around the image. However, when I try inserting the ...

htmlcss

Replace the default MailChimp stylesheet with a different stylesheet

Objective: I want to modify the background color of the "Subscribe" button on a MailChimp embedded sign-up form found on our company's website page. Query: MailChimp provides the CSS hook "input.button" for styling the Subscribe button. How can I uti ...

htmlcssmailchimp

Nuxt's axios is encountering difficulties in managing the server's response

Having just started working with Nuxt.js, I encountered an unusual issue. There is an endpoint in my backend API that allows users to reset their password by sending a token along with a new password. Although the request is being sent correctly and the s ...

javascriptvue.jsvuejs2nuxt.js

What is preventing images from displaying in my slider within baguetteBox?

Currently, I am in the process of incorporating a slider into my website using the baguetteBox library. After consulting the documentation, I successfully implemented an example that is functioning smoothly without any issues. In order to display a series ...

javascripthtmlcssreactjsslider

Struggling to get the Bootstrap Striped-table feature to work properly within a Vue

I am currently developing a friends component that displays a user's friends based on a response from an API endpoint. To showcase the responses in organized rows, I aim to utilize the bootstrap striped-table class for styling. You can find more inf ...

laraveltwitter-bootstrapvue.jsvuejs2bootstrap-4

Is there a way to prevent one accordion pattern from automatically closing when another one is opened?

I'm currently working on a code that involves accordion patterns, and I've encountered an issue where opening and closing one accordion automatically closes another. I want all accordions to remain open until the user explicitly clicks to close t ...

htmlcssbootstrap-4

Works well with Bootstrap but not compatible with other frameworks

Looking for assistance with a code within Bootstrap (HTML and CSS). I have been trying to create a dropdown menu (burger menu) following the Bootstrap Documentation, but I am unable to expand the burger menu (Dropdown). I have tested it on both Firefox an ...

htmlcss

Is it possible for a CSS code to be universally effective across all PHP files by setting style.css in header.php and then including header.php in each of the other PHP files?

Let me confirm, the code snippet from the header.php file is as follows: <link rel="stylesheet" href="style.css"> If I include the following code in every other php file: include 'header.php'; Will all the files have access to style.css ...

phpcss

React Native buttons are displaying at a fixed width and not adjusting as expected

Within a row, I have two buttons with a padding of 20 between them, and they are only taking up the necessary width for the button text. The width remains constant! Here is the code for the buttons: <View style={styles.buttonContainer}> &l ...

javascriptandroidcssreactjsreact-native

Creating a graphql mutation in Vue Apollo without any parameters: A step-by-step guide

In my Vue application, I am working on toggling the width of a sidebar menu. To keep track of different UI states such as whether the sidebar is open or closed, I plan to use a UI object stored in a local Apollo cache. I have a query that checks the state ...

vue.jsgraphqlapollovue-apollo

Why is my CSS not showing up in Live Server when I preview it from Visual Studio?

Every time I use the "Go Live" option with Live Server (Visual Studio extension), I only get a preview of my plain HTML file. However, when I manually open the HTML file from the folder containing both HTML and CSS files, the page loads correctly with the ...

htmlcssvisual-studio

Difficulties Arising in Flex Layout Usage Due to ngFor Loop Implementation

Despite my efforts, I couldn't locate a question quite similar to mine. If an answer already exists somewhere, I apologize. I'm trying to create a simple flex layout in row format where 2 containers are placed side by side. Inside another compon ...

htmlcssangular

What is the best way to define line length in Bootstrap?

I have the following HTML: .line { width: 100%; height: 14px; border-bottom: 1px solid lightgrey; position: absolute; } .circle { height: 24px; width: 24px; background-color: lightgrey; border-radius: 50%; display: inline-block; } < ...

htmlcssbootstrap-4

Setting an error state on the parent div of a checkbox

I am facing an issue with styling a standard HTML checkbox when it is in an error state. Since it's not possible to style the checkbox directly, I am attempting to apply the styling to its parent div instead. Consider this example: <div class="fo ...

jquerycsscheckbox

Maintaining consistent margins on both the left and right sides can be achieved easily using TailwindCSS

I have been trying to figure out how to center a fixed element on my screen, but all the solutions I've found so far are not working for me. Originally, I tried fixing my div in the center of the screen using `mx-[40%] mt-[10%]', but it only look ...

htmlcssreactjsnext.jstailwind-css

Observing nested data changes in Vue.JS?

In my Vue.js components, I have a group of checkboxes that are sending data to the parent element. My goal is to monitor this data for changes and use it to filter information in an API call. When certain checkboxes are selected, the data stored on the pa ...

javascriptvue.jsvuejs2

Restrict the number of choices in a drop-down menu using Angular

Is it possible to limit the number of results displayed in a dropdown select tag and add a scrollbar if there are more options? Check out my code below: <select class="form-control" name="selectedOption" [(ngModel)]='selectedOption'> ...

angularcssangular5

How to center a label vertically within a button group using Bootstrap

How can I vertically align labels for 2 inline elements inside a horizontal form without using hacks like display:table? So far, this is the code I have tried: bootply ...

htmlcsstwitter-bootstrapvertical-alignment

Combining an input box and label on a single line with the help of Bootstrap

Hi, I'm Sonal and I'm currently utilizing a Modal on my website. Within this Modal, I am looking to create a form with labels and input boxes displayed on the same line. Below is the code snippet I am working with: <a data-toggle="modal" hre ...

htmlcsstwitter-bootstrap

Ensure that the token remains current with each axios operation

I need to access an Express REST API that demands a valid json web token for certain routes. In order to include the token from localstorage every time I needed, I had to create an "Axios config file". My http.js file includes the code below: import Vue ...

javascriptvue.jsaxios