My website features images with a width of 720 pixels. I am looking for a way to ensure that these images are either 95% of the page's width (with a maximum width set at 95%), or 720px if the screen size is too large. This is to prevent distortion on larger screens. Can this be achieved through CSS?
When styling an element, you have the option to set both a width and a max-width. The element will adhere to the specified width, but will shrink if the max-width is smaller.
You can find more information about this behavior on the MDN website.
This approach ensures that the width property does not exceed the value set for max-width.
img {
background-color: grey;
border: 1px solid blue;
width: 400px; /* Ideal width */
max-width: 80%; /* Max width */
}<img src="http://placehold.it/400x400">It's worth noting, as mentioned in another response, that you can set width as a percentage and max-width as pixels. Ultimately, the result is the same: the image's width will be determined by the smaller of the two values.
In my opinion, setting the width in pixels aligns better with the semantic meaning. You're defining the image to be a specific number of pixels wide (in relation to the image itself), while using a percentage as a constraint for smaller screens. However, feel free to approach it the other way around too - no judgment here!
GolezTrol was close, but just mixed up the max-width and width values.
Here is the correct configuration you need:
img {
width: 95%; /* Ideal width */
max-width: 720px; /* Max width */
}<img src="http://placehold.it/800x800">Our current issue involves a z-index problem with a div that should be positioned above another specific div. The div in question, named (house-over-banner), is set to absolute positioning, while the one below it is relative. Interestingly, everything dis ...
I currently have a collection of button images with different hover effects specified like this: <img src="home.PNG" onmouseover="this.src='homemo.PNG'" onmouseout="this.src='home.PNG'" /> My goal is to make them scroll down to ...
Incorporating bootstrap 4.6 and flexbox into my design, I am facing an issue with a horizontal line not filling the space between two other div elements. When the text is short, everything aligns as expected. However, when the text extends to two lines, t ...
I need to have a form where the save button is positioned outside of the form elements. However, when I move it elsewhere, the form does not refresh. <form ng-submit="save()" action="" name="addInv" novalidate> <div class="col-md-10 ...
After reviewing various CSS templates, I noticed that some classes contain the overflow:hidden property without a defined size. As far as I understand, block elements typically expand to accommodate their content unless instructed otherwise. Given this, ...
My regex string is used to extract a value from CSS code like this: body { background: #000; } /* drapeDecalage: 10px */ I am trying to parse the commented drapeDecalage value. I have created a regex expression for that: (?<=\/\* drape ...
Among the numerous StackOverflow examples showcasing an auto-height Textarea, one noteworthy example can be found here: <textarea oninput="auto_grow(this)"></textarea> textarea { resize: none; overflow: hidden; min-heig ...
I am trying to create a menu element that remains fixed at the top of the browser viewport as the user scrolls, ensuring it is always visible. In my webpage layout, the menu sits below some text in the header initially. Once the user scrolls past the heade ...
Recently, I've been working on a project involving a table that has a button at the end. My goal is to double the text size of the rows in the table when the button is clicked. As someone who is new to JQuery, this question may sound basic but any hel ...
I am looking to create a tooltip box that appears when hovering over an element, and I want the tooltip to only disappear when the user's mouse exits a specific custom hover area outlined by a vector graphic. My current implementation is working, but ...
Is it possible to apply a random CSS rotation to an image just once, rather than having it continuously spin when hovering over a leaflet map? http://jsfiddle.net/J03rgPf/mzwwfav4/3/ I want the random CSS rotation to be set only one time. How can I achie ...
I have a unique setup with two canvases. I've customized them to be circular by utilizing the border-radius property. The second canvas is positioned perfectly within the boundaries of the first one using absolute positioning. This is where it gets e ...
I am dealing with a flexbox grid that contains random width images: https://i.stack.imgur.com/pfPeU.jpg I want to stretch the elements in each row to full width to eliminate any white space - Is there a way to achieve this using CSS? justify-content do ...
In a jQuery call, I am working with a string of HTML as shown below: var template = '<html >' + '<head>' + '<h1>Most important heading here</h1>'+ '</head>' + '<body>' ...
I am attempting to replicate a similar effect as seen here, which is accomplished using the CSS property background-attachment:fixed. However, I want to achieve this effect using div elements instead. For instance, could I apply this effect to an h1 tag? ...
I am looking to display detailed descriptions for each city in the same consistent location on my map. With multiple pieces of information to include for each city, I want to ensure that the description box is positioned at the bottom of the map. Can any ...
When attempting to center align images and their post titles, I encountered an issue where the left part of the image and title were being cut off by a small margin. Despite trying various methods, I was unable to successfully center the title tags. You ca ...
I have integrated jscolor (from jscolor) to allow users to pick a color with an input field. However, I am facing issues in styling it as I'm unable to remove the hex value of the selected color and couldn't find any relevant documentation on av ...
I am facing an issue with my layout where I have 2 columns, one containing some inputs and the other only a textarea. The problem is that I want the textarea in the second column to extend and fill the remaining height of the first column, but so far I hav ...
Struggling to integrate the title bar in a UWP project using JavaScript/CSS/HTML and having trouble accessing the necessary APIs. Came across a custom helper class written in c++ in UWP samples on Github, but unable to reference it in my javascript code. H ...