I have a div which is width:500px; and height:170px;
The div contains a jquery slideshow which gets random images from my database and displays them.
Problem is that the images are uploaded by users and can be any aspect-ratio/any size.
I need the images to fit the div without being resized using
style='height:x; width:x;
Basically, I want all images to be displayed properly and in acutal quality.
I don't want to restrict which sizes of images can be uploaded as they as displayed in other parts of the site in full size/quality.
Can any provide a solution?
You could use CSS to set the size of the images in the slideshow without necessarily changing the aspect ratio of the image.
set the height of the image to the height of the slideshow container
make the width auto so it maintains its aspect ratio
set a max-width so it doesn't get wider than the slideshow
slideshow.img{
height:170px
width:auto;/*maintain aspect ratio*/
max-width:500px;
}
Note the images might be slimmer than the slideshow if the original size is small.
You should be able to use CSS's max-width property. You won't want to specify the width or height if you do this.
Your HTML:
<div id="yourContainer">
<img src="imagePath" />
</div>
And your CSS:
#yourContainer {
width: 500px;
height: 170px;
}
#yourContainer img {
max-width: 100%;
max-height: 100%;
}
This won't centre your image inside of the container, but it should get the job done for you.
I have figured out how to accomplish image resize keeping aspect ratio and centering the image with simple piece of CSS code as follow:
width: auto !important; /*Keep the aspect ratio of the image*/
height: 140px !important;
margin: 0 auto 1em auto; /*Center the image*/
Hope this help someone :)
Use the below combination of height and width
style="height:271px; max-height: 336px; max-width:336px; width: 263px;"
Related
I fetch an image using this syntax
'''''
echo "<img src="data:${fileData["MimeType"]};base64,${fileEncode}"/ height='350px' width='350px'";
''''
is there a way I can make this responsive using bootstrap?
Thanks
Just add class = "img-fluid" to the img tag.
according to Bootstrap documentation "Images in Bootstrap are made responsive with .img-fluid. This applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.".
I'd like to have my website including v-app-bar and everything limited to max-width 1440px on larger screen, and add a thin bolder to both left and right edges. For the rest of the area outside of the edge, I'd like to add a nice background color or image.
What's the better way to accomplish this idea? I am using Vuetify v2.1.5. Thanks.
You can do this with plain 'ol CSS
#page {
background: url(niceimage.jpg);
width: 100vw;
min-height: 100vh;
}
#app {
max-width:1440px;
margin: 0 auto;
}
where #app is your application div, and #page is an element that wraps it;
The Pinterest Widget Builder allows for flexibility in creating a widget to place on your site. I added one on this page, but there appears to be a limit to the width you can set for the widget. For example I set the width to 1170, but it is only displaying at 1111px.
Here is the code:
<a data-pin-do="embedUser" href="http://www.pinterest.com/rouvieremedia/" data-pin-scale-width="180" data-pin-board-width="1170">Follow Pinterest's board Pin pets on Pinterest.</a>
This is a Bootstrap site and I would really like to be able to make this widget responsive as well. I tried applying css styling to the widget just to see if I could impact it using this. Alas, no luck.
div.container > span.PIN_1407891215996_embed_grid.PIN_1407891215996_fancy {
border: 5px solid red;
}
Any suggestions for interacting with this element would be appreciated. Then I can apply some additional styling.
Wrap your widget in a container, e.g. #pinterest-container, and add the following styles:
#pinterest-container > span {
width: 100% !important;
overflow: hidden;
}
#pinterest-container > span > span > span > span {
min-width: 0;
}
The first one overrides width which is otherwise fixed, making it responsive. The second one deals with an issue where the last column is not displayed if the widget is very narrow.
The width of the widget depends on a number of factors:
The width of the enclosing element: you can't exceed that width
A multiple of the data-pin-scale-width + padding: the width of the widget won't pad right. It'll be exactly the size of the multiple of the items inside + small padding left and right, and the padding between the items
And given the above, the data-pin-scale-width obviously
So if you want an exact width of 1200, try the data-pin-scale-width="195". That should do it, assuming the enclosing element is larger.
Here's a solution I came up with: http://pastebin.com/kXVDWUu8
I suggest including the following style:
#pin-container > span {
box-shadow: none !important;
width: 100%;
overflow: hidden;
}
To make the Pinterest widget responsive, this is the solution that worked for me. Taken from here.
CSS
#pinterest-container {
display: flex;
}
#pinterest-container a {
flex: 1;
}
I would like to have in Wordpress the normal text width 660px and the images between text wider than the text (max-width:1000px).
How can i handle that?
You could give images negative left and right margins. In order to work, though, they shouldn't be max-width, but just width:
.container {
width: 660px;
}
img {
width: 1000px;
margin-left: -170px;
margin-right: -170px;
}
Another alternative, use a grid system and great a new .row or whatever your grid system calls it for each image, with columns that are wider than the one used for the text.
Kendo UI treeview triangles are too tiny for my users.
I want to make them bigger.
If those are the only icons that you want to make bigger, you can try creating two images with the desired size and then define the following styles:
#grid .k-hierarchy-cell > .k-icon.k-plus {
background-image: url('/images/plus.png');
background-position: 0 0;
width: 32px;
height: 32px;
}
#grid .k-hierarchy-cell > .k-icon.k-minus {
background-image: url('/images/minus.png');
background-position: 0 0;
width: 32px;
height: 32px;
}
Here I create an image and saved in /images/plus.png for expanding the details and size 32x32 pixels and another saved in /images/minus.png for collapsing it.
With the CSS selector I'm limiting its scope to a grid which id is grid.
You will need to manually edit 'Default/sprite.png' located in you styles folder together with other kendo styles. This post should get you started >> http://www.kendoui.com/forums/ui/general-discussions/using-the-kendo-ui-theme-builder.aspx#Bi_T-0dZtEuYNyT-ypDIlA , use attached *x2.psd sprites or edit files further in photoshop.