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.".
Related
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;
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.
I have a jqGrid and it comes with default background image, I want to change the background image of it. I tried couple of ways as suggested in online
METHOD 1. I added below code in my CSS
.ui-jqgrid .ui-widget-header
{
background-image:url(images/my-header.png) repeat-x !important;
}
METHOD 2.Added below code to load complete event of jqGrid
loadComplete: function () {
$("#gview_jqgCUST .ui-jqgrid-titlebar").removeClass('ui-widget-header');
$("#gview_jqgCUST .ui-jqgrid-titlebar").addClass('jqgrid-header');
}
in CSS I added
.jqgrid-header{
background:red url(images/my-header.png) repeat-x scroll 50% 50%;
border:1px solid black;
color:Blue;
font-weight:bold;
}
and I am loading css files after jqGrid css file but could not achieve it
How can I do it ?? Any sample code please... I am new to jqGrid and jQuery..
First of all you can use ThemeRoller of jQuery UI to customize theme which you use on the page. You can reduce the applying of the theme only to a paer of your page by usage of "CSS Scope" (see the answer).
Alternatively you can specify background of .ui-jqgrid .ui-widget-header. The demo uses the background from "Dot Luv" theme. Additional to background I specified colors of the text and the border to make the look of header better. I used CSS
.ui-jqgrid .ui-widget-header {
border: 1px solid #0b3e6f;
background: #0b3e6f url(http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/dot-luv/images//ui-bg_diagonals-thick_15_0b3e6f_40x40.png) 50% 50% repeat-x;
color: #f6f6f6;
}
The resulting grid looks like on the picture below
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.
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;"