532 questions
0
votes
2
answers
73
views
How do I get CSS "width:auto" to give sizing priority to text alongside it within a DIV?
I am using width:auto to have an image look reasonably sized on both desktop and mobile. My problem is that the image takes sizing priority to fit on the screen and bunches the text up on the right. I ...
2
votes
1
answer
53
views
Making An Image with overlaid anchor tags screen responsive
So I've got an image with anchor tags overlaid ontop and I'm trying to make it responsive to screen sizes. At the moment I've been able to make it responsive to screen widths but not screen heights, ...
- 33
0
votes
0
answers
66
views
object-fit: contain breaks responsive image srcset
I have a simple scenario, where I have the left side of the screen a static image, and the right one is scrollable based on content. Left side width depends on screen size. Something like "if ...
- 7,540
0
votes
0
answers
32
views
No src and sizes attributes present on Wordpress thumbnail images; the smallest image size is loaded irregardless of viewport size
I have set up custom thumbnail sizes in my functions.php, as follows:
function df_theme_support() {
add_theme_support('post-thumbnails');
//Custom image sizes
add_image_size('small-thumbnail', ...
- 31
0
votes
2
answers
50
views
Image causing column flexbox to overflow if fails to load
I'm puzzled by the following problem:
I created a flex row of fixed width with two elements:
a flex column of two elements: a image which has its width and length given in its html tag and a paragraph,...
0
votes
2
answers
51
views
I have an image banner I'm trying to center on desktop and fill the screen on mobile
I have a banner that I'd like to float in the middle of the page on desktop and fill the screen on mobile.
Here's my CSS for media (set up by someone else)
}
@media(max-width:100%) {
height: auto;
...
1
vote
0
answers
26
views
Can't make responsive images work with parallax.js - plus image missing from jsfiddle
I have a mixture of scrolling and parallax images. I need one of the parallax images to be responsive - either scale with the width of the viewport (preferred), or display a different image.
Or ...
- 137
-1
votes
1
answer
93
views
Why Lighthouse complains about my responsive image sizing?
Lighthouse complains, that my images are not properly sized. Although, im giving a pretty broad selection of images, with sizes specified pretty much on point.
Heres my image implementation:
<...
- 378
0
votes
1
answer
86
views
Responsive Image Grid
image of my site showing the issue I am having trouble with my Responsive image grid. I got the idea from this website https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp. I want my ...
0
votes
1
answer
56
views
How to make Image responsive for all screens
I am creating a project card that contain image and more details. In large screens the style is as expected working fine, but in smaller screens the image change it is behavior and do not cover the ...
- 3
1
vote
0
answers
66
views
JavaScript overwrites settings to make my image responsive (Adobe Animate Export)
I have created an interactive infographic with the help of Adobe Animate and implemented it to my website: Infographic on my Website Unfortunately I don't find a solution to make it responsive; it ...
0
votes
1
answer
199
views
How to set height of grid cells equal to a sibling's concrete height? [duplicate]
I have a grid & subgrids. The rows contain repeated pairs of [<div> containing [<img>]] followed by [<p>].
I want the heights of every image container (class="frame") ...
4
votes
0
answers
65
views
Get currently used url of an image-set (like .currentScr for images)
When you have an <img> with srcset attribute, you can use $0.currentSrc to get the source the browser chose from the srcset. The CSS equivalent of srcset is a background-image with image-set. ...
- 17.6k
0
votes
1
answer
606
views
How to fix Layout Shift for responsive images that use the picture & source html elements?
A problem I have encountered while working with the <source> element is that despite providing the width and height attributes on both the <source> and the image fallback there is still ...
- 27
-1
votes
1
answer
198
views
why an responsive image is shrinking inside flex container and not taking up whole space on responsive screen sizes?
i want to prevent the image from shrinking inside the flexbox, leaving so much space inside the flex container. In fact, the image is made responsive using the img-fluid class from bootstrap 5 classes....
4
votes
0
answers
226
views
Retina-Sized Images Trigger Lighthouse "Properly size images" Warning
My image dimensions are 264x270 when viewed on a "Moto G Power" viewport, which is what Lighthouse is currently using for its mobile audit.
I have a <picture> element set to deliver a ...
- 2,797
2
votes
1
answer
386
views
How to preload image based on screen size
I want to preload an image based on the screen size, so I'm using:
<link rel="preload" as="image" href="/imagemax.png" media="(min-size:800px)" >
<link ...
- 3,098
0
votes
0
answers
63
views
How to make a horizontal ScrollView with images stretch to 100% width and remain scrollable in React Native?
I have a horizontal ScrollView in my React Native app that displays images fetched from a data source. I want the ScrollView to stretch to 100% width of its container and remain scrollable ...
- 18
-4
votes
1
answer
665
views
Make a black and white image turn to color on hover - HTML/CSS/Javascript
Does anyone know how to make black and white images animate to color when you hover over them. This would be like digitally revealing a painting or doing a text fill animation if that makes sense. It'...
- 1
-2
votes
1
answer
2k
views
Cargo website customize css for mobile only
My website looks good on desktop but on mobile version, the header is in a weird placement. How do i change the header font size and placement without it changing for desktop version.
Also my images ...
- 1
11
votes
3
answers
366
views
Responsive image not loading correctly in mobile browsers
I have a website that includes header images.
However these header images do not seem to load at first when I load the website in Firefox or Safari on iOS. Here’s a screenshot:
This is the code for ...
- 708
0
votes
1
answer
233
views
How do I fix the following code to allow the cards offered in bootstrap 5.3 to be mobile responsive?
`I don't know what I am doing wrong with the following code. I keep trying to edit it and I feel I'm making it worse. I can't figure out what I am doing wrong with setting up my container, row, and ...
0
votes
1
answer
71
views
Why does OBJECT element always 100% of html width despite SVG scaling proportions
Can someone please explain why, when my SVG image shrinks in height and its width shrinks proportionally to achieve true scaling, that the width of the OBJECT tag/element still demands 100%
See here ...
- 1,483
0
votes
2
answers
224
views
How to remove border from header background [duplicate]
Today I tried to make a scroll web-site and at the first load I tried to make visible a header without nothing but with a css background. The background is responsive but I don't know why it doesn't ...
1
vote
0
answers
48
views
Responsive picture selection displays wrong image
I'd like to display different images on different view ports. Therefore I have used the <picture> tag with two sources and corresponding media queries. I have did already clear my cache few ...
- 11
0
votes
3
answers
47
views
Why array is empty on render but if code is changed its fills
So I am fetching the urls from a firestore database and then using those urls for the img tags.
However, the issue I am facing is that when the page loads the array is empty but if I make a change to ...
- 77
0
votes
1
answer
72
views
CSS: Why doesn't calc(contain * 0.66) work?
I have two layered background images that need to be sized with contain in order to display correctly at all responsive breakpoints.
When I was specifying background-size using percentages I found ...
- 1,743
1
vote
0
answers
289
views
Enlarged images did not displayed in browser, vite, react
I have a Vite-React app where I have normal size and enlarged images (for retina screen users). All the mentioned images are stored in the public/img/ directory.
The problem arises when I use the ...
- 11
0
votes
2
answers
337
views
Responsive image map not clickable - how to fix hyperlinks?
Very amateur, but trying to create a one-image newsletter through Mailchimp with several hyperlinks. Image should adjust responsively to fit displays and map should adjust along with it. Using ...
- 1
-2
votes
1
answer
43
views
three images not side-by-side but vertical when using col-s-4
so I am trying to put three images side by side using bootstrap row and col-s-4. It works when using desktop size but when it comes to mobile and tablet size the images are stacked vertical instead?
...
1
vote
0
answers
391
views
Responsive images on CSS grid; how to serve best image size
I have a CSS grid with a fluid layout of repeating columns minmax(33.8rem, 1fr).
The grid container has a max-width: 140rem applied, so it will show a maximum of 4 columns. The grid container is ...
- 214
1
vote
1
answer
54
views
How do i change the image to square after 960px breakpoint?
I am unable to determine what to change so that after 960px break point the image would show as square on the right side of the paragraph.
According to the instructions I have been given:
It says,The ...
- 11
0
votes
1
answer
100
views
How to make responsive images that keep the same aspect ratio across multiple items
I am a bit confused when trying to keep a consistent size with my images when the screen while keeping a stable aspect ratio in my containers.
I try to make a little card that holds a picture and a ...
- 15
1
vote
1
answer
320
views
How to have text content "squeeze" image but fill rest of screen
I have the following HTML:
<div class="container">
<div class="box">
<img src="https://placehold.co/600x400" class="image" />
<p&...
- 7,017
0
votes
0
answers
71
views
How do you put multiple images in a different position between texts?
I am new to CSS, and I'm planning to make a page section where there are four images (two left, two right) between a text and each image is located on a different position. I need to make it ...
- 1
0
votes
0
answers
45
views
How to make images in specific layout responsive?
I am trying to create an image gallery in html css, using positioning such as left:0px;, but I am struggling to make the images responsive for different screen sizes whilst keeping the layout. How can ...
- 11
0
votes
1
answer
2k
views
Insert image from Mac finder into HTML
I am trying to add an image from my downloads in my Mac Finder (using HTML) but the image won't show up when I've tried.
I opened the image with Chrome to get a link: Users/oliviamartin/Downloads/...
- 11
1
vote
2
answers
527
views
Why is there no image scale option for editors in TYPO3
Everytime I search about changing image sizes in TYPO3, the only thing I can find is cropping, as if it was the only way to manipulate image sizes. This even confuses editors and they asked me, as the ...
- 3,279
0
votes
2
answers
652
views
Why does Chrome pick a larger image when there is a better one in srcset in this example?
I am trying to understand the basics of responsive images.
I have this very simple webpage:
http://chubby-orange-fox.s3-website.eu-north-1.amazonaws.com/test.html
<!DOCTYPE html>
<head>
...
- 12.4k
2
votes
2
answers
423
views
Does the src attribute in img tag still serve a purpose in modern browser that srcset can't?
For example, the following image element with no src tag provides the last image link as the default image when all media conditions fail and load perfectly well in modern browsers. The alt text ...
- 61
0
votes
1
answer
175
views
Load same aspect ratio thumbnails in Wordpress
I've registered the size for a landscape image with a specific aspect ratio in WordPress (2048 pixels by 684 pixels);
add_image_size( '2048x684-header', 2048, 684, true); //crop.
I've set the ACF ...
- 17
7
votes
1
answer
2k
views
can't get NgOptimizedImage to be responsive in Angular 15
In an Angular 15.1.x project, i'm trying implement an image that is responsive on mobile and desktop using NgOptimizedImage. The mandatory img width and height attributes are overriding the sizes ...
- 538
1
vote
1
answer
200
views
Having issues with images overlapping using CSS
Initially, I had this formatted the way that I wanted. After adding and removing code over the last few hours, I'm unsure of what revision that I made that prevents me from separating the individual ...
- 15
0
votes
1
answer
46
views
Background Image not expanding with it's parent
i am currently doing a challange on frontend mentor but i have a problem with the background images i used to create the curved sections, if you go to the developer's page, and expand the screen to ...
- 39
0
votes
1
answer
160
views
How to position text and images in a responsive way, with HTML and CSS
Im trying to position this image and tittle with text on my website.
How can I make it responsive so that the scale doesnt change on different devices and everything stays at the same position.
Im new ...
- 41
-3
votes
1
answer
69
views
I don't know how to do CSS Responsive
I would like to make the tea cups and the text under each one overlap each other in mobile format and leave it as it is in computer format, can you help me please? this is on computer
and this is on ...
-1
votes
1
answer
918
views
Responsive font-size
hi i'm new to webdev and i was tring to make my first full-responsive webpage
but i had a problem that the text is extra large for the mobile version
so i did set the width to #vw as i though that ...
- 11
5
votes
0
answers
367
views
What if I preload a lazily loaded image?
I have a mobile-only image. The problem is that with the default loading strategy (eager) the image is getting loaded even on desktops or larger screens. But the image is important for mobile devices ...
0
votes
1
answer
42
views
Problem making WordPress images responsive
I want to make WordPress images responsive, I have read many articles, but I am facing problem with mobile responsive.
This is the code I use :
function blog_2( $attr, $attachment, $size ) {
$attr[...
0
votes
0
answers
360
views
Safari SVG mask-image lines on responsive img when changing windows size
I am using a a SVG image-mask on a responsive image. When I change window size, some strange white lines appear (only in Safari):
https://www.loom.com/share/a1f43b501fab49d596da77e0721a4e21
I use this ...
- 143