Questions tagged [responsive-images]

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.

518 questions
0
votes
2 answers

How to make a background image in CSS responsive? bootstrap

I have this image in css and I want to add bootstrap class: img-responsive to it so it becomes responsive. It's easy if it's in HTML but how to do it in CSS? #index-jumbotron { height: 490px; margin-left: 0; margin-right: 0; …
Seif
  • 566
  • 2
  • 10
  • 21
0
votes
1 answer

Responsive images, serving small on mobile with downloadable as original

I hope the title isn't too confusing. I am using Adaptive Images to detect a visitor's screen size and automatically create, cache, and deliver device/break-point appropriate re-scaled versions of the web page's embedded HTML images. Now... some…
0
votes
1 answer

:Bootstrap .img-responsive images are not responsive in FireFox

My website built with Bootstrap 3.3.5 contains images that I want to be responsive, so I assigned the .img-responsive class to them. However, they are not responsive in Firefox (when I resize the window to a smaller size, the image does not get…
0
votes
1 answer

Images are not properly aligning in responsive design

I have developed a responsive website design. Here it is secondgf . In one of my post I have arranged all the images at center. It is working properly on desktop and all images seems properly aligned at center, but when I open it on a mobile device…
Akshay
  • 101
  • 1
  • 10
0
votes
1 answer

Light Box only one image loads, 3 others do not

Hi I am redesigning my website, I am a novice at JS and CSS, pretty good with HTML 5. I am working on a new responsive web site with a gallery page of images using Lightbox. The Beta Site and Gallery Page is…
Scotty
  • 3
  • 1
0
votes
1 answer

Calculate the size of a specific portion on a background set with background-size: cover;

I am trying to build an hybrid app and I need to get the size of a specific porition of the background. The background has those properties : background-size: 100% 100%; background: url('back.jpg') no-repeat center center fixed; I would like to…
Djagu
  • 163
  • 1
  • 12
0
votes
1 answer

img {max-height:%} fails in chrome

I have coded a horizontal scrolling photo gallery wherein the images scale based on the viewport size. I am using an inline list for the images in combination with an img{max-height: 68%}. This works great in Safari and fails in Chrome and Firefox.…
llyfre
  • 25
  • 1
  • 8
0
votes
1 answer

How do I force SVG-supporting browsers to load the SVG instead of fallbacks?

Home Safari 9, which is perfectly capable of SVG loads home-2x.png instead on my retina MacBook. Why isn't it…
Michael Swarts
  • 3,813
  • 8
  • 31
  • 41
0
votes
1 answer

Why is my page not 100% responsive?

I'm learning to code by simply being thrown into different projects and I'm stuck on my page. I have been working on making this page responsive for a few days and I can not get it working. Is it my images that are not responsive? Or is it the…
cgrouge
  • 177
  • 2
  • 16
0
votes
1 answer

Background image becomes responsive at specific browser width

I have a large background image that is a specific height and width which I'm happy with for desktop. I'm using background position centre top atm, so I can see the entire image but width is cropped as browser width is reduced. There is a specific…
Goardo
  • 49
  • 12
0
votes
6 answers

Getting rid of this margin and vertical height and alignment

I'm trying to make a website for me but i'm having some problems. This is what i'm trying to achieve: Photoshop image And this is what i have so far Actual image Here are the problems i'm currently facing: I can't get rid of the white space below…
Uzer
  • 187
  • 2
  • 3
  • 15
0
votes
1 answer

Responsive navigation bar not shrinking with slider

I am trying to have my navigation bar shift with the picture slider that it is located underneath when I shrink the width of the screen, but unfortunately the navigation is not moving with the rest of the content above it. Here's the link to the…
0
votes
1 answer

Responsive div with images

I have 3 images in a div placed horizontally. When I resize the page the images changes their position and float in a vertical alignment.I want the page responsive and when i resize the page i want that the whole div is adapted and resized. I need…
mario
  • 43
  • 1
  • 7
0
votes
1 answer

How to add retina image to responsive email

Logo image is doubled and reduced to smaller size with set pixel width and height. I want the image cleaner and not blurry. Logo still is original size in outlook. Do I need to wrap this in it's own table to a set pixel width? Do I need to set a…
linda
  • 1
  • 3
0
votes
1 answer

Equal height for video embed and image in one row

I have two 50% width divs. One is simple image and another one is YouTube embed. What I want to achieve is to have the same height for both elements (image and video). I need that this would work the same on responsive. I was trying to use…
MIC
  • 135
  • 2
  • 13