I am using the example of clásico listview with thumbnails present in the jquery mobile documentation. But if I upload images with different sizes , they are not suitable for resolution. How to solve this?
The code: http://demos.jquerymobile.com/1.4.5/listview/#&ui-state=dialog
You may use CSS max-width and max-height
li.ui-li-has-thumb img {
max-width: 80px;
max-height: 80px;
}
or you can force the size you want:
li.ui-li-has-thumb img {
width: 80px;
height: 80px;
}
Related
I've come across an issue i cannot seem to solve. Im using uncode theme- wordpress. If you see the link in desktop, the images of the carousel are waaay bigger than it needs to be. On mobile it is ok. i want it to fit the available size of screen, or at least kind of match it.
I have tried css and js, but if i change the height of the carousel image, there is a HUGE white space below it. there are no options available for this inside WP, so im assuming css/js is needed.
I added this custom css to make it visible for you the error. If the white spacing is removed, i can make the JS code easily so the images fit the screen:
.post-content .vc_row.limit-width.row-container {
max-width: 100%;
}
.post-content .row-parent {
padding: 0 !important;
}
#gallery-206225 .owl-dots{bottom:-22px!important;}
.owl-carousel .owl-item img {
width: auto!important;
height: 500px!important;
display: block;
margin: 0 auto;
}
#media(max-width:768px){
.owl-carousel .owl-item img {
width: 90%!important;
height: auto!important;
max-height:900px;
}}
any thoughts?
Link Here
You can set a max-height to the image and have that apply only to desktop screens above 1100px.
Like so:
#media (min-width: 1100px) {
.owl-carousel .owl-item img {
max-height: 400px;
}}
I have been trying to change the width and height of my Codemirror editor using CSS but it does not seem to have any effect.
.CodeMirror {
width: 500px;
height: 1000px;
}
Instead of resizing accordingly it remains at a height of 300px and full width.
Nevertheless I am still able to set width and height via code: editor.setSize(500, 1000);
What am I doing wrong?
Have you tried.
.CodeMirror {
max-width: 500px;
max-height: 1000px;
width: 100%;
height: 100%;
}
Try using percentages.
Also CodeMirror docs specifically say you should use width: auto and height: auto to auto scale. just fyi.
Make sure to import your own CSS file after the default stylesheets of Codemirror. Otherwise the defaults do not get overridden properly. Simply import your stylesheet last.
I have an image slider. It is 100% wide and it's height is 400px. I'd like my picture which are always bigger than the slider (f.e.: 2500*1250 etc...) to fit properly in my slider. How can I do that? with a jquery script dinamically?
My code:
#slider {
width: 100%;
height: 400px;
position: absolute;
overflow: hidden;
}
--My ID's for the images displayed in the slider.--
#first {
}
#second {
}
#third {
}
Try this way for img in slider :
#first img,#second img,#third img {
position :relative;
width:100%;
height:auto;
}
you no need to write jquery for that change your css like this
#first img {
width:2500px;
height:1250px;
position :relative;
overflow: hidden;
}
use same as the other image ID, but I think it's better use one class for all, because in a slider need all images are same size
Neither work. I've seen somewhere a guy who posted a js for this but I could not find that thread that's why I posted.
Ok so I am making a filterable portfolio with bootstrap 3 and quicksand.js, I am using quicksand to filter the portfolio. Now I had this working fine when my images were set widths and heights but when I change the width and height to 100% the sorting is weird, the images become bigger when they are sorting and this causes all kinds of glitches.
I had to use jquery migrate to get the sorting to work because the tutorial was so old, I dont know if this will be a contributing factor to my issue.
Here is old jsfiddle with the issue.
Here is updated fiddle, with my max height + width fix
Also you can check out this link which has the images at a fixed width, the sorting looks fine but then they stack on top of each other at lower screen sizes.
UPDATE: Okay I have fixed the issue at desktop width by using max-width: 390px; and max-height: 390px; on my .portfolio img class. But now on lower resolutions (tablets etc) the images are bigger again. Would the best way to fix this be with media queries or any suggestions? I realize now that bootstrap is designed to be mobile first but I am too far in my code I believe, what do you guys suggest.
I resolved this issue by changing my portfolio img css to:
.portfolio img {
max-width: 100%;
width: 100%;
height: auto !important;
}
And used media queries to limit the width and height on the image at each viewport:
#media (max-width:767px) {
.portfolio img {
max-width: 100%;
max-height: 100%;
}
}
#media (min-width:768px) {
.portfolio img {
max-width: 240px;
max-height: 240px;
}
}
#media (min-width:992px) {
.portfolio img {
max-width: 314px;
max-height: 314px;
}
}
#media (min-width:1200px) {
.portfolio img {
max-width: 380px;
max-height: 380px;
}
}
http://jsfiddle.net/uv634/2/
I have these two images appearing in my site that I am pulling from another company's server. I need these photos to scale with the browser window so I've given them a % width and height to scale with the body.
The problem is some of these images are different sizes and I need all the images to look identical to each other. This is easy to do when I know the values of the image's width and height because I can just crop or resize. But how can you maintain a ratio with a scalable width and height?
I think some JavaScript is required to do this. Here's the CSS that I have:
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
.image {
width: 40%;
height: 40%;
margin: 1%;
}
If you're not concerned about IE8, you can just specify the width. Most browsers will maintain the aspect ratio for you.
Doing it with CSS only will take you a lot of time to optimize for all brosers.
With a few modifications and js you may achieve this using Perfect background image