I'm using UIKit 3 and I have problem with height of image in my Product detail themplate.
There is no problem with width it works just fine, but I do not know how to set max height of image.
Is there solution how to do it directly with framework?
Here is the the example:
Codepen: https://codepen.io/Ages/pen/pozYPbJ
Thank you!
I'm sorry here is correct link:
Codepen: https://codepen.io/Ages/pen/rNBRmRG
The solution is with .uk-responsive-height
<div class="uk-width-1-3#m uk-text-center">
<div uk-lightbox="animation: fade">
<a class="uk-inline" href="#" data-caption="#">
<div class="uk-height-medium">
<img src="#" class="uk-responsive-height uk-responsive-width">
</div>
</a>
</div>
</div>
Related
I did a thumbnail with some images . I'm using bootstrap.
Below each image I want to put a title .
The problem is when the title is large, it breaks to a second line , making the thumbnail become disorganized .
here the what issue
https://s17.postimg.org/v4116i54f/pic.png
anyone know how to fix this?
<div class="col-lg-3 col-sm-6 videoitem">
<div class="b-video">
<div class="v-img">
<img src="http://domain/cover/7604.jpg" class="img-rounded" width='270' height='169' alt="">
<div class="time">3:50</div>
</div>
<div class="v-desc">
<a href=".html" >title</a>
</div>
<div class="v-views">
27,548 views. <span class="v-percent"><span class="v-circle"></span> 78%</span>
</div>
</div>
</div>
You have two possibilities here:
Either force one-line titles with height, overflow and text-overflow
Or clear the floats after every 4 items using some kind of clearfix
If you are not much concerned about browser support you can also try Bootstrap 4 which implements grid using flexbox
You can add a min-height for the title or you can use to -webkit-line-clamp: 2;like this answer https://stackoverflow.com/a/13924997/7565713
I have one child div vertically centered under a parent div {parent div has a certain height}. I have assigned the child div with height:100% but it is not taking this property only on safari. Here is a screenshot about the issue.Safari bug
Everything is working fine in chrome and moz but safari. Here is the live version of the website. http://www.ravnapp.com/
Any help will be appreciated, Thank You !
Update: Here is the relevent html code.
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2">
<div class="action-image uk-position-relative">
<div class="uk-cover-background">
<img src="img/action1.png" width="100%" height="" alt="">
</div>
</div>
</div>
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2 action-text uk-vertical-align">
<div class="uk-vertical-align-middle">
<h1 class="avenirlight">TOTAL PRIVACY <br><span class="avenirmedium">AND CONTROL</span></h1>
<p class="desp blenderbook">Ravn is yours to use as you like. Everything is safe and secure and even your notifications are fully disguised. Your privacy is our priority.</p>
</div>
</div>
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2 action-text uk-vertical-align">
<div class="uk-vertical-align-middle">
<h1 class="avenirlight">EXHALE, <br><span class="avenirmedium">FINALLY</span></h1>
<p class="desp blenderbook">Ravn is 100% discreet. All your activity is stored within Ravn so you won’t have any surprises popping up in your chat history or camera roll. We’ve got your back.</p>
</div>
</div>
<div class="uk-width-medium-1-2 uk-width-small-1-2 uk-width-large-1-2">
<div class="action-image uk-position-relative">
<div class="uk-cover-background">
<img src="img/action2.png" width="100%" height="" alt="">
</div>
</div>
</div>
It looks like the container divs don't actually have a height set on them and they need to have a height before the content can vertically center. since you are going full screen and setting width to 50% and want the height to match.. just add
height: 50vw;
to each container. This will set the height to half the viewport width, which will match the width of the box given your current setup.
You will have to adjust your images to be actually square though as they are a few pixels short.
according to http://getbootstrap.com/css/#images-responsive, I want to make my image to support a responsive website by using
<img src="..." class="img-responsive" alt="Responsive image">
But it is not working.
Here is my code,
<body>
<img class="img-responsive" src="images/myImage.png" />
</body>
The original image size is 284x191
When I open a browser on 1920*1080 screen size, the image size is 284x191. But when I open a browser on 1280*720 screen size, the image size is still the same.
I don't know what I did wrong to reduce the image size dynamically.
Thanks for help.
In Bootstrap 4 the syntax is class="img-fluid"
All you need is width:100% .
Using col-xs-12:
<img class='img-responsive col-xs-12' />
Or
<img class='img-responsive' style='width:100%;' />
Try this code
img-responsive makes the max-width:100% If you want the image to be full width (even though it's actually much smaller than the width of a typical screen), you need to force it to be width:100%...
http://codeply.com/go/fDNOBhaQPS
You need to wrap your Img tag with any bootstrap class. As I did as div with col-lg-4 class.
<div class="col-lg-4">
<img class="img-responsive" src="http://ichef.bbci.co.uk/wwfeatures/624_351/images/live/p0/36/gd/p036gdwj.jpg" />
</div>
or
<img class="img-responsive col-lg-4" src="http://ichef.bbci.co.uk/wwfeatures/624_351/images/live/p0/36/gd/p036gdwj.jpg" />
If you not wrapped with div tag
Link : http://codepen.io/anon/pen/MygbNO
I had the same issue.
I realized that I was using bootstrap 4 (and not 3).
Changing it back to bootstrap 3 fixed it for me.
It is important to know what version of bootstrap you are using. This is because the technique used to make images responsive keeps on changing from version to version.
I tried <img class="img-responsive" src="<your-URL>"> and <img class="img-fluid" src="<your-URL>" but none of it worked for me.
For Bootstrap V4.5, use:
<img src="my-URL" class="img-fluid" style="max-width: 100%; height: auto;">
Modify <img class="img-fluid" src="<your-URL>" to include styles, then it will work. The reason for this is so that it scales with the parent element.
You can read the Bootstrap documentation on images to learn more.
use class="img-fluid" for bootstrap 4 version
I have a block:
<section id="why">
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="img/image.png" alt="image">
</div>
</div>
</div>
.container have a margins of left and right, and i can't position image on left of body.
I need to pull image on left of body, and i need to make it responsive.
it looks like this
Give this a try.
You don't need the container, row or col divs.
<section id="why" class="text-left">
<img src="img/image.png" alt="image">
</section>
To make an img responsive use this:
<img src="..." class="img-responsive" alt="Responsive image">
The .container has a padding of 15px on each side. By using a tool like Chrome Inspector, you can see the styles that each div has.
If not inspector, try removing each div that you have, one at a time and seeing how each one works. The time it took to ask this question, you could have narrowed it down by simply experimenting.
The official website is more than useful, is very well-documented, and it will clear up a lot of things if you take a little bit to read through it.
http://getbootstrap.com/css/
give this a try
<div id="why" class="pull-left">
<img src="..." class="img-responsive">
</div>
you will now have a responsive image. But take note that the class img-responsive by default is display: block. if you want to resize the image, just set the width and height of the image.
I need to achieve something like this:
<a style="display:block;" href="#">
<div style="float:left;display:block;">Left</div>
<div>
<div style="display:block;">Right</div>
<div style="display:block;">Right Bottom</div>
</div>
</a>
Basically a button with 2 columns and the right column having 2 rows.
It shows up correctly in modern browsers with inline/block support but in IE6 and IE7, whenever I hover the left div (with float) it'll display as the 'select' text icon instead of the hand icon (i believe once float, block will be cancelled and displayed as inline). Is there any way I can achieve this without using an image as a whole? I need it to be text because it's important for SEO and retina displays.
:( :(
<a href="http://www.google.com/" target="_blank" style="display:block; overflow: hidden" href="#">
<div style="float:left; width:150px;">Left</div>
<div style="float:right; width:150px;">
<div style="display:block;">Right</div>
<div style="display:block;">Right Bottom</div>
</div>
<div style="clear: both;"></div><!-- This will clear the floats for IE -->
</a>
To avoid text cursor add this CSS -
a div{cursor: pointer;}
Demo - http://jsfiddle.net/ZhKmr/4/