Position of the image in the Bootstrap model "carousel."
I thought I would take a shot to boot. There is a starter template in Dreamweaver that does more or less what I want. But I have a problem of tiny design that I can not really the solution. Maybe can someone help?
I use the included slide show 'Carousel', but I don't think that the proportions of the image should be the same regardless of the size of the viewport. With a large window, I don't want the image in full height, I want not cropped. That's why I added a 'max-height' to the box containing the image. It works very well and the height of the image does never exceed my max value.
But: the position of the image in the box limited height is not centered vertically. The image is cropped just at the bottom of the box, while I love to crop the top and bottom. I tried many ways to center the image but failed. Normally this wouldn't be a problem for me, but since I am changing the design to someone else, there seems to be something that I don't get.
This is a simple example of site showing my problem: http://www.linnsideout.se/imgtest/
That's what I want to with large windows:
And that's what I get:
Everybody out there is able to tell me the css tricks necessary to center the image vertically at the start of the crop box?
The way you have the sample is the way it should work. It's because you used the fluid container. If you use just the containing class, you would have cut offs for each device. In this case, you can use the image just for this device.
Take a look at the use of srcset to load the images. Take a look at the sensitive Images: If you are simply changing resolution, use srcset. | CSS-Tricks
Tags: Dreamweaver
Similar Questions
-
Fix the position of the subtitles carousel bootstrap in DW CC
How can I fix the position of the subtitles carousel bootstrap in DW CC?
I want to remain at the bottom of the image on the left side so that they are visible to all screen sizes and they do not disappear behind a fixed top navigation bar.
Thank you, David. I seem to have fixed in a combination of things
left: 1%;
right: auto
low:-30px;
Nancy - change the padding of the body at the top did not make a difference, but I don't have a wrapper so maybe that this has an effect.
-
Difficulty of positioning of the images using widgets
First, I will start by saying that I really, really, really want to love this program and work with it regularly. I've been an evangelist for her and love the whole proposition that a design for the Internet much less expensive and much more intuitive. So thanks, Adobe for doing things in the right direction.
That said, I think Muse is always incredibly full of bugs, and working with her is far from being as smooth as it should be now that users are required to pay a monthly fee. I'm still on the fence about whether to take the plunge at the end of the 30 day trial. (Resolution of this case will go a long way to convince me.)
Widgets have proven one of the tools more difficult to manage in the arsenal of the Muse, which is what brings me here tonight. The problem I have is the scaling and positioning of the images using the slide show - and have it stay like that.
I am able to move the image of Heroes (largest) then it is placed and scaled properly, but I can only do this with a single image at a time. As soon as I'll do to evolve a second hero image to match the first one returns to the default size and the introduction and the second is correct.
As shown in the first selection of the screen, the image of hero on the right is sized correctly to align with the top and bottom of the thumbnail grid.
But it will happen only this trick once. All other images of Heroes change size, move to the Center or the float everywhere where they wish, as shown below.
It is a model that is extremely frustrating, and if cannot be resolved, I'll have to give up Muse as the solution to this design problem.
Help, please! (Thank you.)
OK, I finally diagnosed the problem, the solution was not very intuitive. In fact, I realized only the answer when I went on the site for export as HTML.
Because the images of Heroes was put across the slightly larger that the suggested size, I discovered that if you go to the assets Panel and right click on the title of the image (which has a small plus sign next to it to indicate the difference in size), it invites you to "import more large size of the image" (maybe this isn't the precise language (, but it is an option that sounds almost exactly like that).
Once you do this for each image, they are no longer returned to the small size or random placement. They're going where they are supposed to and they seem to stay there.
So I'm happy to announce, case closed.
-
19.02 Firefox breaks the position of the background image.
Hi, I have a jQuery plugin that worked well until I downloaded Firefox 19.02 now the Image slider does not work.
More precisely the position of backgroundImage doesn't seem to work. Instead of each piece of the picture being selected using a specific and different up and left (x and is position on the Image) all the pieces are showing the top left corner! It worked well in the earlier version of Firefox and still work on the latest versions of Google Chrome, Safari and Opera.
Appreciate any help you can offer.
TC
It's logical. If Math.abs (yPos) works, then yPos cannot be a string, and therefore cannot contain units.
-
How can I determine the position of the mouse in a 2D image control
I have an app where I would like the user to be able to interact with objects in a 2D image control with the mouse. To do this, I need to translate between the screen coordinates, which are transmitted with the events of mouse and in the control of 2D image.
The problem that I am running is that I can't find a way to determine the screen coordinates of the top left corner of the drawing/client of the 2D image control area. I tried to use the 'Position' of the image control property, but this results in a mismatch because of the difference between the upper-left corner of the image control (including the label, etc.) and the upper left corner of the drawing area. See attached VI.
Does anyone know how to get the coordinate of the screen from the corner of the drawing of the control of the photo area?
Mark Moss
I tend to use the mouse in the image control property to get the position. Deals with things like the passage of origin for you.
-
wallpaper will change the position of the image
HP Pavilion dv7t 2200 - I put one of my pictures as wallpaper, but the position of the image is stuck on "limousine." I try to choose other positions of the photo and clicking "save changes", but nothing happens - always stays on "stretch".
Does anyone have a solution for this?
Well you didn't say what OS your running, but if windows 7, use this link http://h10025.www1.hp.com/ewfrf/wc/softwareList?os=4063&lc=en&dlc=en&cc=us&lang=en&product=3999449 and at the bottom, install the screen background picture position enabler
-
The positioning of the image Windows 7 Home premium 64-bit background will not change
So I can change my background very well, but the position of the image, I can't. Position as in, tile, stretch, Center, filling and adjustment. I think he's stuck on stretch. I read a bit about it on the forums and some people were saying to install a "facilitator of photo wallpaper". I tried to install this and it did not work. I am not finding other solutions, so I don't know what to do =)
Good question. Not sure, but it seems to have something to do with the aspect ratio.
For example -.
I have pictures on the internet that measure, 2220 x 1476, 960 x 540, 954 x 534, and 700 x 467 pixels.
and options of wallpaper does not allow for anything other than full screen on any of them.
The same is true if I convert photos in 1920 X 1080 (the native resolution of my screen).However if you use a photo with a resolution that measures say, 800 x 600, 2048 x 1536,.
(the res native to my camera), it will appear with the different options available in the
Customize the wallpaper option.If I use Photoshop (or similar) to change the size of say, 954 x 534 at 800 x 600 or 1280 x 1024.
the options are available. -
Make very small adjustments of position of the image without using a mouse
First Elements 14. I want to set the position of a background image used in a title of movement. I am able to select the background image. However, the only way to move/adjust the position of the image is to use the mouse. With the help of the mouse gives me enough "micro movement." The mouse's movements that are too large. How to use the keyboard to make the mirco-fine adjustments to the position of the image?
Thank you.
Is - this context in the title of the Motion itself? If so, micro adjustments can be difficult.
However, if you set the background of the title of transparent movement and put the background on the video track below, you can make very specific changes to the background by going to apply effects/Motion and Position adjustment digitally.
-
What is the practical limit to the number of images using the Bootstrap carousel?
Usually three or four images show the demos and tutorials. Can I charge realistic 107?
What kind of things can be wrong with that?
107 images should always load and very probably kill with unwanted bandwidth mobile data plans. I would use 5-6 images in a full-sized carousel.
Maybe you should do is a gallery of thumbnails like this:
Bootstrap Modal + Carousel Gallery - http://alt-web.com/
Nancy O.
-
Unlock the position of the 'legends box' for each image in the slideshow
Hi guys,.
I have a slideshow that has 8 images with thumbnails for example. I want to move the caption (text box) for each image in the other location, but if I adjust the caption of an image and others, their legends are exactly in the same position as the caption for the first image.
There must be a work around for this surely,
I came across this post - help with captions in slide shows , but I do not understand what is needed to do this, if someone manages to do, could you please limit exactly what is needed to get the look. I tried to disable "change set" and that did not help either.
I hope someone can help here, I really need to be located in different places for each image captions in the slide show.
Thank you!
You can use any composition in the form of a slide show and add the text block in the container, place the block of text in a different location for each container.
Thank you
Sanjit
-
OBIEE 11 g title view position of the Image
Hi all
Is it possible to change the position of the image title vision in OBIEE 11 g. By default the image is coming up on the left side... In my report, I want to display on the right side...
Guys please help...
Concerning
To achieve this, you will need a custom skin (you can change the original file, but I wouldn't have to do this!).
The control file rendered with regard to the display of the title of the GUI is in the msgdb. This is the/messages/standardviewtemplates.xml. New: Please follow the process to create a custom look and put her updated the standardviewtemplates.xml.
Changes must be made here:
Standard:
<img border="0" src=" 
After the changes:
<img border="0" src=" Basically you swap the order of the Logo-> title-> title-> help-> Logo helps. This way, you know what is happening in the doce above and do title-> Logo--> help if you want.
These changes are application-level everywhere where the custom skin is used (or just applciation-wide full stop if you change the original file).
How to control the position of an image of hero slideshow lightbox
How can I control the position of a hero image in a lightbox slideshow? Everything I've tried has no effect. I hope I'm wrong, but t that appears when the lightbox option is selected, that there is no control on the position or the image of hero on the Web page. I my case, I want to push it higher on the page to make room for a great legend.
Lightbox will appear the image in the Center on the page, if you want to change the position, you must apply some javascript from your end, there is no direct way to Muse to do.
Thank you
Sanjit
I have an image I want to animate on hover above him as in this example http://codepen.io/chriscoyier/pen/vDBCI I would like the picture to animate to the top and stay in an elevated position, until the mouse leaves the hover.
After clicking on the link above, the example is in the lower left corner of the page (it's a red rectangle. Go over it please and you will see what I want to accomplish)
If we cannot accomplish this in muse, can I use another Adobe software to create and import in muse?
Thx for your help!
Sam
Try this code
in HTML
In your code, I see under style, Body tag is not closed,} is missing, maybe that's the reason.
Hope this helps
Sorting of images based on their position on the page
How would I go about sorting the images based on their position on the page? I've read a few articles which mention the use of table method fate and checking their x and y values to sort the table. While that works on the page elements that are perfectly aligned with their x and is the axis, it fails on a layout like this. Does anyone have any ideas on how I could create an individual table for line1, line2, Row3 etc based on his position there and then sort them based on their position X and then create the master table combining them in order?
I'm new to javascript, so it's a bit out of my League. Any help will be much appreciated.
Hi again,
I found an idea that seems promising to deal with the issues mentioned above. The main problem, as you have no doubt noticed, is that we cannot simply count about to coordinates (x, y) 'as they are', even after having rounded values, to extract implied rows and columns.
When we look at the layout below:
our eyes instantly detect what he expected to be 3 columns and 5 rows, but this underlying order is not immediately accessible from all sort all of the coordinates. We need to improve the algorithm.
What I propose is to speculate about the gaps that occur on the ordered sequence of coordinates x and y, respectively. To reveal these gaps, we will first sort the data along the x-axis:
The figure above shows that the width of the rectangles. Each arrow represents a rectangle, and I ordered the elements by increasing x-centers. We can estimate that the element identified #1 belongs to a new group of this simple fact: its left coordinate (red mark) is higher than the coordinated right (blue guide) of the #0element. This observation will give us a strategy to identify gaps in the column.
Then, the same method is applied to detect the lines. (Sort by values y, identify gaps, based on the progress of the min - max).
At the end of this process, each object has a (column, row) coordinate pair instead of fragmented values (x, y) . So, we can calculate the final order, i.e. the weight of the comparison function.
Here is my implementation of this algorithm:
// ======================================================== // Up2Bottom and Left2Right Sorting Algorithm // addressing (weakly) sparse rectangles // --- // Usage: Select the objects, then run the script // Target: InDesign CS4/CS5/CS6/CC // ======================================================== const CS = +CoordinateSpaces.SPREAD_COORDINATES, AP_MIN = +AnchorPoint.TOP_LEFT_ANCHOR, AP_CENTER = +AnchorPoint.CENTER_ANCHOR, AP_MAX = +AnchorPoint.BOTTOM_RIGHT_ANCHOR; var sel = app.properties.selection || null, data = [], r, i, j, k, t, n, w, vMax; if( sel && 1 < (n=sel.length) ) { // Collect coordinates and IDs // --> {min:[xLeft, yTop], weight:[x,y], max:[xRight,yBottom], id}[] for(i=0 ; i < n && (t=sel[i]) ; ++i ) { data[i] = { min: t.resolve(AP_MIN,CS)[0], weight: t.resolve(AP_CENTER,CS)[0], max: t.resolve(AP_MAX,CS)[0], id: t.id }; } // Find rows and columns [i.e. y-weights and x-weights] // --- for( j=0 ; j < 2 ; ++j ) { // Sort by center coordinate // --- data.sort(function(a,b){return a.weight[j] - b.weight[j]}); // min > max ==> w++ // --- for(vMax=(t=data[0]).max[j], t.weight[j]=(w=0), i=1 ; (i < n)&&(t=data[i]) ; ++i ) { if( t.min[j] > vMax ){ ++w; vMax=t.max[j]; } t.weight[j] = w; } } // Compute final weights, clean up data, create ID-to-weight access // --- for( i=0 ; (i < n)&&(t=data[i]) ; ++i ) { w = n*t.weight[1] + t.weight[0]; // final weight (y first) k = '_'+t.id; // ID key (t.min.length=0)||(t.weight.length=0)||(t.max.length=0); delete t.min; delete t.weight; delete t.max; delete t.id; delete data[i]; data[k] = w; // ID-to-weight } // Apply sort --> r // --- r = sel.sort(function(a,b){return data['_'+a.id]-data['_'+b.id];}); // Show the resulting order // --- for( i=0 ; i < n ; ++i ) { app.select(r[i]); $.sleep(1000); } }@+
Marc
a dynamic image in the plugin model generator does not work
Hi all
The documentation says:
Direct insertion
Insert the jpg, gif or png image directly into your model.
+... This works of course.
Reference URL
1 insert a dummy image in your model.
2. in the image of Microsoft Word Format dialog box, select the Web tab enter the following syntax in the alternative text box to reference the URL of the image:
URL: {'location http://image'}
For example, enter: url: {'http://www.oracle.com/images/ora_log.gif'}
+... This also works when I encode a url in the form url: {"http://www.google.com.tr/images/firefox/mobiledownload.png"} +.
The element of the XML file reference
1 insert a dummy image in your model.
2. in the image of Microsoft Word Format dialog box, select the Web tab enter the following syntax in the alternative text box to reference the URL of the image:
URL: {IMAGE_LOCATION}
where IMAGE_LOCATION represents an element of your XML file that contains the full URL of the image.
+... This, however, does not work. +
I use Apex' report query tool and my query is like
Select 'http://www.google.com.tr/images/firefox/mobiledownload.png' IMAGE_LOCATION of... (a single results set for my model)
the xml data is generated by an IMAGE_LOCATION tag. I have load to plug-in model of word. The Url appears correctly in the report if I get a simple ordinary field.
But when he is at the image-> Internet-> alt as a url text format: {IMAGE_LOCATION} no image displayed.
I need to keep this simple design for a user procedure simple word could design a report using the just of the plugin model generator. I do not wish to explore the region of xsl - fo... yet.
Could you tell me why I can't get this url: {IMAGE_LOCATION} to work?
Concerning
PS: My BI version: 10.1.3.4.1
Published by: oeren June 8, 2011 12:28 AMTry to replace IMAGE_LOCATION .//IMAGE_LOCATION
It worked for me.
Kind regards
JoshuaMaybe you are looking for
-
YouTube and other suspended Adobe-powered Web sites.
Using Firefox v3.6.6, I'm having problems with the plugin as defined in this page from Adobe: http://support.mozilla.com/en-US/kb/The+Adobe+Flash+plugin+has+crashed?style_mode=inproduct I followed the instructions on this page: I use v3.6.6, I instal
-
Hi all... I installed NI - Switch executive, in the Guide Getting started that came with it, he talks about the creation of a virtual switch, called SwithExecutiveGettingStarted, In what it says on the addition of two 'SampleMatrix1' and 'SampleMatri
-
I have a canon pixma 210 and lost the installation disc an idears
I can't find the disc of installation for my canon pixma 210 y at - there some way around this or any idears, please?
-
Folders not visible or accessible in Windows
I got a laptop that died and I'm trying to recover the data on the hard drive. I used xcopy to copy the data folders from the portable hard drive which has been placed in a casing adapter external and connected via a USB adapter. The drive of the l
-
No settings to change USB connection mode
I just bought a m4.Now, I tried to change the USB connection met.But he's not here.The only thing I can do is to install the software for the pc, but that's all.Does anyone else have this problem?Or did someone knows how to solve this problem.The pho
