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>
Related
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.
Here is a link to the site I am currently having issues with:
Link to the Site
as you can see at a full-size window, everything looks quite nice - like a twisted my senses graphic. And now:
As the width of the browser window falls below 1200 pictures (humanoids) "descend" one after the other.
What to do and how to do your photos to a resolution of 768px scale all like their background?
What to do and how to below 768px resolution photos arranged themselves one after another and the lyrics appeared next Featured click on a puppet loaded text using js.
I would be grateful for any suggestions.
Check the bootstrap documentation for its grid system here: http://getbootstrap.com/css/#grid-example-mixed-complete
There are 4 different types of classes col-sm col-xs col-md col-lg each one fitted for different screen sizes and you can combine them to make dynamic grids for your site.
<div class="row">
<div class="col-xs-6 col-md-4 col-lg-3">Test col</div>
<div class="col-xs-6 col-md-4 col-lg-3">Test col</div>
<div class="col-xs-6 col-md-4 col-lg-3">Test col</div>
<div class="col-xs-6 col-md-4 col-lg-3">Test col</div>
</div>
For example the code above has different behavior on small, medium and large screens. The columns resize according to the screen size. On your source code you are only using col-lg type cols.
Since your code is not posted, and you asked for suggestions, I will give you the ones I have. first if your images are moving below each order when you go below a certain screen size/width it is because you wrote code to do that or at least you are not properly using bootstrap. Add a class of img-responsive to your images. It is a bootstrap class that helps you with image responsive designs.
Add a class of col-sm-3 to divs surrounding the images or to the images themselves, it will keep them close on one line for from lg desktops to tablets. if you want the same thing for mobile, you had a class of col-xs-3
<div class="col-sm-3">
<img src="#" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="#" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="#" class="img-responsive">
</div>
<div class="col-sm-3">
<img src="#" class="img-responsive">
</div>
I am using shuffle.js on my homepage and I am trying to get my images to responsively resize like in this demo the developer posted here.
Right now I am just using media queries as a workaround, but the results are far from ideal.
Note: the grid is already responsive, what I would like to see is for the images themselves to resize as well.
You must use a CSS Grid to have a nice responsive combined with Shuttle.
Note the classes .span3 and .m-span3 on element
The example of your link is using Bootstrap v2.3.2.
You can use the Twitter Bootstrap 3 which has better semantic as well, or any other grid system.
http://getbootstrap.com/examples/grid/
If you use Bootstrap 3, add the class xs-col-12 and col-4 like so:
<div id="grid" class="shuffle">
<div onclick="window.location.href = 'IEMA.html'" class="xs-col-12 col-4 item Aston shuffle-item filtered ">
<div id="overlay">ASTON</div>
</div>
<div onclick="window.location.href = 'Aston.html'" class="xs-col-12 col-4 item Aston shuffle-item filtered">
<div id="overlay">IEMA</div>
</div>
</div>
If you don't want to include Bootstrap, you can add http://996grid.com/ with same way, using class .grid_4 shoud be fine.
Update
I can make some adjusts for your page have a better grid with shuffle changing for this style for your items when lower than 690px:
#media only screen and (max-width: 690px)
.item {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 223px;
width: 100%;
}
}
To clarify my question: I'm not looking to resize the grid, that already works.
You have already a responsive class attached to the image's container,
I want the images themselves to resize.
then you only need to add max-width:100% to the img element.
In my case :
<figure class="xs-col-12 col-4 picture-item" data-title="The Magic Box">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img style="max-width:100%" src="/the-magic-box.png" />
</div>
</div>
<figcaption>The Magic Box</figcaption>
</figure>
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 trying to implement image thumbnail preview, using jasny fileinput control. Since my photo could require rotation, I added additional rotation button.
The issue I have got is that when image is not square and it is rotated, it is partially truncated from the thumbnail space.
Here is the JSFiddle http://jsfiddle.net/cumqod2n/
<div>
<button id="rotate" type="button" class="btn btn-default">Rotate <i class="fa fa-repeat"></i></button>
</div>
<br>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img data-src="holder.js/100%x100%" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
<div>
<span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span>
Remove
</div>
</div>
just preview some image and try rotating it - see what I mean.
EDIT 1
Please find updated example here: http://jsfiddle.net/cumqod2n/4/. As you can note, I just move the "rotating" classes to fileinput div. It allows me to rotate image and show it completely. However, I have another issue - when image changes from landscape to portrait it has been overlapped by buttons below.
So my next question is - how can I adjust buttons below image accordingly?
This isn't specific to Jasny Bootstrap, but to CSS transformations.
Read Rotated elements in CSS that affects their parent's height correctly