Make an image responsive - the simplest way
You can try doing
<p>
<a href="MY WEBSITE LINK" target="_blank">
<img src="IMAGE LINK" style='width:100%;' border="0" alt="Null">
</a>
</p>
This should scale your image if in a fluid layout.
For responsive (meaning your layout reacts to the size of the window) you can add a class to the image and use @media
queries in CSS to change the width of the image.
Note that changing the height of the image will mess with the ratio.
Responsive Images with CSS
.erb-image-wrapper img{
max-width:100% !important;
height:auto;
display:block;
}
Worked for me.
Thanks for MrMisterMan for his assistance.
Responsive Image in HTML and CSS
As mentioned in Julian B's post, the picture
element is made to do this sort of thing.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
https://www.html5rocks.com/en/tutorials/responsive/picture-element/
It lets the browser check the media query and choose the best image file to display. Here's how it might look in your HTML:
<div id="header">
<picture>
<source media="(min-width: 480px) srcset="images/H550xW1250.png">
<img src="images/H683xW480.png" alt="header image">
</picture>
</div>
The code above displays the smaller image by default, but the larger image when the browser width is larger than 480px. You can add more src
elements if you have more image sizes to toggle.
Note that I'm using a min-width
query rather than max-width
. This means browsers that don't understand the picture element will display the small image by default.
You can see in the support table for picture
that it's supported by most modern browsers. If you need to fully support older IE, there are polyfills available.
Responsive for image problems in CSS coding
you should try this code. if i understood right, this is what you are trying to do.
make image height:100% ( cover whole height of container ) ; width:auto to preserve aspect ratio of image and center the image.
see snippet or jsFiddle
.container { height:700px; width:100%; position:relative; background:red; overflow:hidden;}
<div class="container"> <img src="http://lorempixel.com/1140/450/" height="100%" width="auto" style="position:absolute;left:50%;transform:translateX(-50%)"/></div>
Related Topics
How to Use a Unitless CSS Variables and Later Add the Needed Unit
How to Specify Different Widths for Columns in CSS3
Why Does the Linear-Gradient Disappear When I Make an Element Position:Absolute
What Is Class="Mb-0" in Bootstrap 4
How to Align an Image Dead Center with Bootstrap
Enable :Focus Only on Keyboard Use (Or Tab Press)
Import .CSS File into .Less File
React Native Text Going Off My Screen, Refusing to Wrap. What to Do
Image Moves on Hover - Chrome Opacity Issue
iOS 7 iPad Safari Landscape Innerheight/Outerheight Layout Issue
Make Child Visible Outside an Overflow:Hidden Parent
How to Transition CSS Display + Opacity Properties
Position: Absolute Without Setting Top/Left/Bottom/Right
Add a CSS Class to Single Code Chunks in Rmarkdown
Z-Index with Before Pseudo-Element
Sub-Pixels Calculated and Rendered Differently Among Browsers
Prevent Flex Item from Exceeding Parent Height and Make Scroll Bar Work