Stack Overflow
Stack Overflow

Questions tagged [fluid-images]

36 questions
55
votes
4 answers

How to center crop an image () in fluid width container

How do I get an image to stay centered when its fluid width (percentage based) container is too small to show the whole image? How can I center the image inside it's container This means it should show the middle of the image instead of the sides…
Bryce
  • 6,440
  • 8
  • 40
  • 64
3
votes
2 answers

How do I get dynamically fluid images depending on browser window aspect ratio?

This might not be a simple question, but I try my best. I have this example site: http://lotvonen.tumblr.com/ I have a little piece of javascript that automatically calculates the height of the inner browser window and sets that number as image…
hlotvonen
  • 119
  • 1
  • 3
  • 10
3
votes
1 answer

Picasa: automaticly change image size in the site

I keep the images of my site in Picasa... as we know we can set size of picture like this. http://lh5.ggpht.com/-i97UI0TXchE/UatpZd-E3tI/AAAAAAAAAFg/HUu-QK63ce0/w900-h0/running-sml.jpg The part w900-h0 means that, the picture size is: width 900px…
Hovhannes Sargsyan
  • 1,063
  • 14
  • 25
3
votes
3 answers

Firefox not expanding DIV container horizontally containing image with auto-width

I have a markup with two containers. The first one is set to "position:absolute" with all 4 "coordinates" to expand all over the site (left=right=bottom=top=30px). Inside that container is another container with its height set to "100%" and…
user1254824
  • 131
  • 2
  • 9
2
votes
2 answers

Gatsby + Contentful + Netlify - how to render tracedSVG images in production?

I am building a website using Gatbsy, Contentful CMS and Netlify. It looks great and works locally but I have a problem in production regarding fluid images using the tracedSVG option. The Netlify deploy used to work on occasions and as I added more…
GBouffard
  • 1,125
  • 4
  • 11
  • 24
2
votes
1 answer

video not sizing to container div

An embedded video will not size to the container div. I've edited the CSS and finally got the poster image to scale correctly, but now the video has cropped on left and right sides by about 50px respectively. Am I missing a container for the video…
jim
  • 31
  • 2
2
votes
1 answer

CSS fluid image background not working in Firefox browser

I am trying to implement fluid image background for one of my webpage. It works perfectly in Chrome but I can't get it to work in Firefox. I have png images of two squares which will resize proportionally when browser window is resized. Here's the…
Kuldeep Kumar
  • 905
  • 3
  • 9
  • 22
2
votes
2 answers

Removing white space under nested img when resizing without squeezing image

I'm making a basic header using divs and a nested img in a fluid layout. I'm a bit rusty on this and i can't for the love of me figure out how to ensure that the image nested in the div scales without scaling to the point where it becomes smaller…
bestfriendsforever
  • 351
  • 2
  • 6
  • 18
2
votes
2 answers

Fluid image inside a resizable DIV

I'm trying fit a fluid image inside a resizable DIV. The image must retain its proportions and never go beyond 100% (both width and height) - even if the containing DIV is larger than the image. The image must also be centered, both horizontally…
Mathias Lykkegaard Lorenzen
  • 15,031
  • 23
  • 100
  • 187
1
vote
2 answers

TYPO3 Fluid: Force image format to be jpg

I have an extension using a Fluid template which looks like this:
This works well - the…
ESP32
  • 8,089
  • 2
  • 40
  • 61
1
vote
2 answers

fluid images inside a fluid container that changes aspect ratio

Hi I have a fluid container that is based on screen height and width in my website. I would like to have an image fill the container at all times as it expands in any direction based on screen size. The images used will vary in size and aspect…
Jonathan002
  • 9,639
  • 8
  • 37
  • 58
1
vote
1 answer

Fluid image that is not width:100%

I have a scenario in which images of varying dimensions appear in a column that's 50% page width. On large screens where the column width exceeds an image's native width, the image should render to its native width while still being fluid. Image…
Wesley Picotte
  • 47
  • 1
  • 8
1
vote
1 answer

Disproportionate fluid image scaling within single row div

I have a row of images sitting in a fluid width container, with a fixed width space between the images. If the container shrinks, the images need to fluidly resize and still fit the entire width of the container. For this I'm using white-space:…
Ro Achterberg
  • 2,504
  • 2
  • 17
  • 17
1
vote
1 answer

Prevent Typo3 broken image url error

In my Typo3 extension I'm showing a lot of images with fluid, an list view of products. Only if for some reason one image is missing on my server, Typo3 generates an full screen error so the complete website is then not working. I my opinion there…
Tom
  • 1,547
  • 7
  • 27
  • 50
1
vote
1 answer

Bootstrap container-fluid image not centered after max width

I have an image (currently 1305 x 352 pixels) inside of a fluid-container like so:
When the page…
chaseha
  • 32
  • 1
  • 7
1
2 3