Responsive-images is the part of Responsive Web Design (RWD) dealing specifically with images on the web to provide optimal experiences across a wide range of devices based on screen size, platform, and orientation.
Questions tagged [responsive-images]
518 questions
0
votes
1 answer
responsive image does not grow if div increases after page load
I am making a series of 3 responsive pinterest-like cards, each one in a Bootstrap column (col-md-4) - so they appear as a row of three on medium width screens (e.g. ipad in landscape). They shrink and grow superbly, until the display shrinks to…
keir watson
- 3
- 2
0
votes
1 answer
Elements get squashed when screen gets smaller
I am making my webpages responsive but struggling to keep elements on the page not to go over each other. I am quite new to web development so I don't even know how to approach the issue. I would really appreciate some general suggestions at this…
Max Visna
- 41
- 6
0
votes
0 answers
How to use "Adaptive Images" with images hosted on Amazon AWS Cloud?
First Question: So I want to use Adaptive Images on a website that I'm building. Problem is that my website is being hosted on Heroku, but my images live on the Amazon AWS Cloud, S3 service. How do I modify the PHP file to point to the source image…
Leann
- 84
- 5
0
votes
2 answers
Auto height with dynamic height image
I search a lot info about height:auto ,but I didnt find a solution for my problem. I need a full width image with dynamic height ,but that doesn't work :( Anyone can help!?
HTML:
eatmailyo
- 670
- 1
- 12
- 33
0
votes
2 answers
Bootstrap Unresponsive In Safari - Host: Google Drive
Note: Google Drive no longer provides hosting. Thereby the information below (as well as any answer) is virtually irrelevant.
Bootstrap is not being applied on Safari Mobile.
I'm using Google Drive for hosting.
Website I'm working on:…
user5306470
0
votes
1 answer
Getting flexible horizontal scaling images to work in Safari
Im working on a website where i have to crop images on the left and right side, and center them. I found a solution for this, with this code: http://codepen.io/anon/pen/dXMrWj
Jelle
- 29
- 1
- 8
0
votes
1 answer
image keeps disappearing when making my page/view smaller
My background image keeps disappearing whenever the screen gets smaller. I want to make it responsive.
This is what I have for my CSS code:
#heading {
text-align: center;
color: white;
background: url('#someimage') top center no-repeat;
…
lalaknowles
- 1
- 3
0
votes
2 answers
CSS property "height: auto;" isn't working for background images
I have a webpage with a parallax scrolling effect where the CSS property height: auto; isn't working in any of the classes for any of the three background images. When I use height: auto; the image disappears. The dimensions of the three uploaded…
Michael Swartz
- 858
- 2
- 15
- 27
0
votes
1 answer
Lazy loading wont work for responsive images in slick carousel
I have problem with lazy loading images in slick carousel. When I use devices that have screens below 980px, everything works as it should (load smaller images on demand). But when I am on screens with resolution greater than 980px it load all big…
Nikola Papic
- 1
- 1
- 5
0
votes
1 answer
How to equal the space in responsive header?
I have a big header image in homepage. I managed to make the image responsive in mobile version but I have difficult to manage the spaces between button and text after bottom. The spaces is not the same in every mobile screen. Sometimes the spaces…
User014019
- 1,215
- 8
- 34
- 66
0
votes
1 answer
What is a valid, efficient, and modern way to not load images on mobile?
I've come across this multiple times now and always solved it with a combination of CSS and JS, but with increasing support for responsive images, I've been searching for a more eloquent solution. I'm simply trying to not load an image on mobile,…
Marcus McLean
- 1,306
- 2
- 13
- 24
0
votes
1 answer
Efficient responsive images with gulp
I am trying to efficiently generate responsive images for use on a website, but have some trouble with handling existing files and paths in gulp. The images reside in hierarchically structured folders, where pages is the root with several subfolders…
OleVik
- 1,222
- 3
- 14
- 28
0
votes
1 answer
Mobile Background Images Zoomed In
I have found several queries along this line, and they either did not have solutions or their solutions didn't work for me. I have media queries set up, the smallest being max-width (700px), and when I preview the site on my desktop with my browser…
mrsjetset
- 1
- 3
0
votes
2 answers
Responsive background image without media queries
I need some guidance into making a responsive background image for an admin page without using media queries. The background image needs to respond to the browser window without stretching.
Similar to this example page
I using bootstrap 3.3.6 to…
Andrew C. Duarte
- 237
- 2
- 15
0
votes
1 answer
Make image responsive in wordpress?
How do I make images automatically resize themselves depending on the screen size?
I add a css attribute for an image such as
img {
width: 100%;
height: auto;
}
but that will make a small image take the form of the container it is in and if…
thomas
- 163
- 2
- 13