I have a lot of elements (bootstrap html) that behave responsive on a website. This means that they do not have a fixed width or height.
In each element an image should be displayed.
I tried to work with height or width100% values. Also min-height or min-width I have tried. I also tried it with a div and its background-image.
I also found this similar posts on Stackoverflow:
Wrap image in fixed height and width
Displaying images with adaptive width and fixed aspect ratio
Unfortunately, the first post based on fixed height and width. The second post is very helpful, but I search for a solution without using JavaScript (if this task is not solvable with pure HTML and CSS, I would try it with JavaScript).
I work with default bootstrap elements like this.
<div class="row">
<div id="element1" class="col-sm">
<img id="img1" src="1.jpg" />
</div>
<div id="element2" class="col-sm">
<img id="img2" src="2.jpg" />
</div>
<div id="element3" class="col-sm">
<img id="img3" src="3.jpg" />
</div>
</div>
All images should have the same width and height, although the image files have actually not the same width and height on file system.
If the images are too small or too large, the image should be scaled. If the ratio of height and width should not be correct, only a matching section of the image should be displayed.
Of course I do not expect finished solutions, but I would be very happy about approach ideas.
Related
In my web page I have an anythingsider running. Which looks like this
<ul id="slider-main">
<li>
<div class=" right-2 up-3 ">
<div>
<img src="http://i.picresize.com/images/2015/08/10/zrsLx.jpg" class="img-responsive" width="1600" height="1070">
</div>
</div>
</li>
<li>
<div class=" right-2 up-3">
<div>
<img src="http://i.picresize.com/images/2015/08/10/zrsLx.jpg" class="img-responsive" width="1600" height="1070">
</div>
</div>
</li>
And My Slider Image looks like this
But when the screen resolution is low like 1366x768 Image does not act as responsive. Only few part of the image is shown in web. Can any one please tell me what I am doing wrong here?
Note: CodePen Link to my demo source
One quick solution: update the image height to fit the height of the viewport.
$(".img-responsive").height($(".anythingWindow").height())
Now this still needs some tweaking because as specified in the question comments:
If the screen width is larger than the picture width, then a blank space will be shown to the right of the image.
As there is a footer, the bottom part of the image is still hidden by it, so you'll need to adjust the picture height to the view area height - the footer height.
In the end the code would be like this:
$(".img-responsive").height($(".anythingWindow").height() - $("footer > div").height())
.width("100%");
And that code must be called when the page loads and when the page resizes. You can see it working on this Codepen.
I have a website about products. Each product article has text and some images in it. The images range from 400px width to some going up to 700px width. The product article is stored in a SQL Server database and the article is fetched dynamically based on the productid.
I am using Bootstrap to make my website mobile friendly. I have a two column layout. The product article is contained in a Div marked with a
class="col-md-12 row"
When I shrink the size of the page to preview how it would look in a mobile device the text nicely adjusts itself, however the images don't. Now i have about 3000 such images and if there is an attribute that I have to apply to every individual image tag, that won't be feasible.
Is there any other way using CSS or bootstrap or javascript where I can reduce the size of the image for a device size, keeping the image aspect ratio intact ?
Just add this somewhere in your stylesheet and it will apply to all images on your site.
img {
display: block;
max-width: 100%;
height: auto;
}
Bootstrap v3 and below.
Use class="img-responsive" in the image tag. This will automatically adjust the size based on the screen size. Its a bootstrap class.
Ex: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_img_responsive&stacked=h
Bootstrap v4
Use class="img-fluid" in the image tag. This will automatically adjust the size based on the screen size. Its a bootstrap class. see comment below for more details
With a Specific Width:
<img src="assets/img/why1.png" style="max-width:20%;" alt="...">
Automatic Width:
<img src="assets/img/why2.png" class="img-fluid" alt="...">
Try to this.
<div class="row">
<div class="col-md-4">
<img class="thumbnail img-responsive" src="h.jpg" />
</div>
</div>
Try adding this to css
.col-md-12 img {width:100%}
#imgdiv { width:40vw;display:table-cell;vertical-align:middle; text-align:center;}
img {max-width:100%;height:auto;max-height:100%;}
<div class="row">
<div id="imgdiv" class="col-sm-5 text-center">
<img class="thumbnail img-responsive" src="https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
style="maxwidth:100%;height: auto;max-height: 100%;">
</div>
</div>
I'm using HTML, CSS and Jquery and I did a image hover effect with the watch image and I want to be able to add the same image and effect with multiple images vertically down the center of the page but it wont let me, here's the site in question! any help would be great!
<div id="header">
<h1></h1>
</div>
<div class="center12">
<img src="image/logocenter1.png" alt="** PLEASE DESCRIBE THIS IMAGE **">
</div>
<div id="nav">
<h2>
Home / Styles & Sizes /
Brands & Prices /
Watch Straps / Tips on buying used
</h2>
</div>
<div class="fadehover">
<img src="image/test1.png" alt="" class="a"> <img src="image/test1bw.png" alt="" class="b">
</div>
It seems like it should be simple, but it wont work.
Instead of using jquery and two images for gray scale effect, use the following:
By adding an css you can bring the same effect using a single image(no need of jquery and hover image).
Add this css:
<pre>
img.a:hover {
filter: url("");
}
</pre>
and remove the jquery and another gray scale image. If you don't want hover effect and the images are needs to be shown one by one down, remove one of the images inside the div and put it into a separate Div'
I am using the new flex slider and I want to retain the dimensions of my images. It keeps re-sizing the images no matter what options that I use. Has anyone hard-coded, and option where you can retain a certain height and width for your FlexSlider viewport?
Are you using Flexslider 2
Try using a containing element with a class like, .flexcontainer, and with a set width or max-width in your css to match the width of your images:
<div class="flexcontainer">
<div id="my-slider" class="flexslider">
<ul class="slides">
...
</ul>
</div>
</div>
I have searched the knowledge base high and low, but nothing seems to give me a result.
I have attached a screenshot and code of the content I'm working on below, but what I'm needing to do is vertically align the images based on the height of the div created by the tallest image.
So, a few things. The fixed height of the container .one-edition is determined by the tallest image size - can I do this with JS?
Then, once the height is determined, the images are aligned vertically in the middle.
Hope this makes sense.
<div class="grid_3 one-edition">
<img src="images/editions/1_Right_To_Buy_295.jpg">
<div class="editions-info-text">
<p>Right To Buy</p>
<p>C-type Print</p>
</div>
</div>
<div class="grid_3 one-edition">
<img src="images/editions/2_Scorer_295.jpg">
<div class="editions-info-text">
<p>Hyperbolic Paraboloid Roof</p>
<p>Offset Print</p>
</div>
</div>
<div class="grid_3 one-edition">
<img src="images/editions/3_PL16_295.jpg">
<div class="editions-info-text">
<p>132Kv PL16</p>
<p>Offset Print</p>
</div>
</div>
<div class="grid_3 one-edition">
<img src="images/editions/4_What_We_buy_295.jpg">
<div class="editions-info-text">
<p>What We Buy</p>
<p>Publication</p>
</div>
</div>
I see many answers already but I'm still posting this, because I spent time using placekittens..
http://jsfiddle.net/7ybzp/6/
Basically, I used vertical-align: middle. I used inline-block though.