Reduce the dimensions of a CSS attribute automatically

Displayed below is the image with a width of 192 and height of 109:

<a href="https://www.blogger.com/u/1/blogger.g?blogID=4402911157743442948#"><img alt="" class="thumbnail" height="109" src="https://2.bp.blogspot.com/-E5ftfbCCgkw/XjnLpO347cI/AAAAAAAAAE8/85xzQpWk1Q8-8A8le4Zj4zPlzs4xCRIcQCLcBGAsYHQ/s1600/1974%2B-%2BKamen%2BRider%2BAmazon%2BEpis%25C3%25B3dios.jpg" width="192"></a>

Incorporated within the image is a .playWrapper that superimposes a play button. The issue arises when viewing on mobile or other devices where the image size changes but the .playWrapper width remains fixed since it has to be set manually. Even after attempting width: auto;, the desired effect was not achieved. How can I ensure that the width of .playWrapper adjusts dynamically based on the image width?

Below is the CSS code for playWrapper:

.overlay .playWrapper{opacity:0;position:absolute;z-index:1;top:0;width:192px;height:109px;background:rgba(0,0,0,0.6) url("http://wptf.com/wp-content/uploads/2014/05/play-button.png") no-repeat scroll center center/50px 50px}
cssresponsive-design

Answer №1

To create a responsive design, consider setting the width and height of the image and playWrapper using percentages instead of fixed pixels. For instance, replace width:192px; with something like width=10%; in the css. By determining the screen size and finding a suitable width and height for the image, you can calculate the percentages that will maintain its appearance on different screen sizes. Apply these percentage values to both the image and playWrapper to ensure they are consistently sized. Because percentages adjust based on screen size, this method should help your design adapt smoothly. Best of luck with implementing this solution!

Answer №2

When dealing with an absolutely positioned element that is relative to another element (its parent), it is recommended to avoid using specific height and width values. Instead, consider using 

top: 0; bottom: 0; left: 0; right: 0;

If you don't want the element to completely cover its parent, you can adjust these values to a specific pixel measurement. For example, you can create an element that spans the variable width of its parent but is only 30px high at the bottom:

.your_overlay_element {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
}

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

Having trouble keeping the HTML text centered within the div on a responsive layout

Having an issue with keeping text centered in the middle of a div that overlaps an image. It looks fine on desktop but when I try to make it mobile-friendly, things go haywire. I believe the problem lies in using fixed heights for the div, as setting heigh ...

htmlcsstextalignment

flexbox wrapping text styling

Can text be wrapped in flex within a fixed width container? For example: img username added you as a friend Instead of: user added img name you as a friend I am able to achieve this if the image and 'a' were separat ...

cssflexbox

To incorporate node_modules CSS into a Vue.js application that is utilizing SCSS, follow these steps

After deploying my application to AWS, I noticed that the application was rendering correctly except for the Syncfusion controls, which were not rendering correctly. Surprisingly, there were no errors shown in the Google Chrome console. On my local machine ...

cssvue.jswebpacksassej2-syncfusion

Stylishly Select with Bootstrap 4

Currently, I am utilizing Angular 2 with bootstrap 4 and have implemented the following select element: <div class="form-group"> <label class="col-md-4 control-label" for="OptionExample">Choose an option:</label> <div class="c ...

htmlcssangularselectbootstrap-4

How can I change the cursor of a button to a pointer in Bootstrap 4 when the button is not disabled?

I'm working with a bootstrap button <button class="btn btn-primary">Login</button> My goal is to change the cursor to a pointer (hand) on this button when it's not disabled, instead of the default arrow. The disabled property of th ...

htmlcsstwitter-bootstrapbootstrap-4

Scroll Bar Menu (User-Controlled)

I'm looking for any libraries out there that can replicate or provide a similar horizontal scrolling menu to that of espn.com's homepage. I'm relatively new to jquery and feeling a bit lost on where to begin. I did some searching on Google, ...

javascriptjquerycss

Tips for creating a navigation bar that bypasses body padding in HTML and CSS

I have set padding in my 'body' tag, but I want my top navigation bar to cover the entire page without being affected by it. I attempted to fix this by setting the width to 100% and using negative padding and margin values, but it did not work a ...

htmlcss

The image source is visible in Vue.js, but unfortunately, my picture is not showing up

Below is the code and script that I have: <template> <div class="tasks_container"> <div class="tasks_content"> <h1>Tasks</h1> <ul class="tasks_list"> ...

javascripthtmlcssvue.jsdom

The layout of my website is perfect when my laptop's zoom is set to 90%, but at 100% it starts overflowing

Currently, I am in the process of building a website on my laptop while following an instructor's video tutorial. It has been important for me to set the same pixel measurements as the instructor in order to replicate the design they provided. However ...

css

Tips for adjusting the size of a container to fit its child element in a flexbox layout, where the flex-direction is set to column

Below is the functional code: .container{ display: flex; background-color: lightgreen; justify-content: center; alighn-item: center; } .child{ margin-left: 10px; height: 200px; background-color: yellow; display: flex; flex-direction: ...

htmlcssflexbox

Adjust jQuery UI's resize functionality to maintain the current total width

I arranged two containers horizontally using the position: absolute property. I am attempting to create a "resize bar" in the center that, when dragged, will expand one container while shrinking the other (thus maintaining the overall width). <div clas ...

jqueryhtmlcssjquery-uiresize

Having trouble toggling the dropdown submenu feature in a Vuejs application?

.dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorial ...

javascripthtmlcssvue.js

Ways to position a single item in the middle of a multi-column layout

I need help with aligning dynamic images in a 2-column layout. What's the best way to center a single image or collapse the columns when there's only one image? Currently, the single image is always placed in the left column. Is there a CSS-only ...

htmlcsscss-multicolumn-layout

The label is not displaying the specified font-family in CSS

Below is a snippet of code that I am having trouble with: testing some content Additionally, here is the CSS code for it: label { font-family: "Andale Mono"; } The issue I am facing is that no matter which font style I try to apply, it does not seem to ...

csslabelfont-family

How can I modify the font style in Bootstrap?

How can I integrate a custom open font into Bootstrap without using a CDN? Should I create a CSS rule to override Bootstrap's default font or locate the font files in Bootstrap and replace them with my desired font? ...

css

Enhance Vuetify pagination with personalized styles

I'm attempting to create a toolbar with pagination control aligned to the right, featuring smaller pagination control buttons. To achieve this, I took the following steps: Wrapped v-pagination in span (since v-spacer did not work without this) Adde ...

cssvuejs2vuetify.js

Change the background color on hover without affecting the text color

I am having some trouble with my code. I can only change the color of the "popup1_btn" button when hovering, but the text color remains the same. If I use .popup1_btn a:hover, it only changes the background and text color of the text, not the entire button ...

htmlcss

Issue with displaying Favicon on staging server

I need assistance with this issue. I am working to show a title and logo on a tab. It is functioning correctly on my local machine, but the logo is not appearing on the staging server. <title>Global</title> <link type="image/png" href ...

htmlcssreactjsbootstrap-4

Difficulties with integrating tooltips into SVGs

Being a minimalist, I am facing restrictions while working on a website. I desire interactive tooltips to appear when users hover over specific sections of my SVG. However, I also want to incorporate this interactivity within the SVG itself. The challenge ...

javascriptcsssvg

Set the size of the website to remain constant

Is it possible to keep your website at a consistent size so that when viewed on a larger screen, it simply adds more background or space to the page? (I prefer not to use media queries to change the style as the screen size increases) ...

htmlcss