Imagine watching an image shrinking down and appearing in the center of the screen

I'm struggling with making the image smaller and centering it while keeping its original size. I'm using Bootstrap and need a solution for this issue. How can I make the image centered and shown in its original size?

    <div class="container" style="height: 100%;">

            <div class="col-sm-4 col-md-4 col-lg-4"></div>
            <div class="col-sm-4 col-lg-4" style="height: 100%;display: table;">

                <a href="machine1.php" style="display : table-cell;vertical-align: middle;">

                    <img src="ft/text.png" class="img-responsive" style="min-width:660px;">
                </a>

            </div>
            <div class="col-sm-4 col-md-4 col-lg-4 ">



            </div>


.body-wrapper {
            background: url('slide2_2.png');
            background-size: cover;
            height:100%;
        }
            html, body{
            height:100%; 
            margin:0;
            padding:0;
            color:white;
        }

            a:hover{
                text-decoration: none;
            }

            .img-responsive{
                float: left;
            }

I want the image to be centered both vertically and horizontally with a size of 1366*635

htmlcsstwitter-bootstrap-3responsive-design

Answer №1

It's unclear what you're looking for here. If you want the image to be centered, you can try the following:

https://jsfiddle.net/0fcpr65u/4/

<div class="container" style="height: 100%;">
        <div class="col-sm-4 col-md-4 col-lg-4"></div>
        <div class="col-sm-4 col-lg-4" style="text-align:center">
            <a href="machine1.php">
                <img src="http://webneel.com/wallpaper/sites/default/files/images/01-2014/2-flower-wallpaper.preview.jpg" class="img-responsive" style="width:200px;margin: auto;">
            </a>
        </div>
</div>

Make sure to remove the float from the image CSS.

Additionally, if you want the image to be at the center of the page, you can add width and height to the parent div and make their position relative. You can also add the following CSS properties to the image:

width: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);

Alternatively, you can use the vertically-align property by using display:table. If you want the image to be displayed in its original size, you can use the following code:

<div class="container" style="height: 100%;">
  <div class="col-sm-4 col-md-4 col-lg-4"></div>
  <div class="col-sm-4 col-lg-4" style="height: 100%;display: table; width:100%">
    <a href="machine1.php" style="display:table-cell;vertical-align: middle;text-align: center;">
      <img  src="http://webneel.com/wallpaper/sites/default/files/images/01-2014/2-flower-wallpaper.preview.jpg">
    </a>
  </div>
  <div class="col-sm-4 col-md-4 col-lg-4">
</div>

Alternatively, you can use flex by adding the following CSS to the parent div:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

Answer №2

https://jsfiddle.net/ws4n0kh0/

Give this a try.

<div class="container" style="height: 100%;">
  <div class="col-sm-4 col-md-4 col-lg-4"></div>
  <div class="col-sm-4 col-lg-4" style="height: 100%;display: table; width:100%">
    <a href="machine1.php" style="display:table-cell;vertical-align: middle;text-align: center;">
      <img src="https://www.cs.cmu.edu/~chuck/lennapg/len_std.jpg">
    </a>
  </div>
  <div class="col-sm-4 col-md-4 col-lg-4 ">
</div>

Also, removed img-responsive from the CSS.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problem with displaying information in the table based on the numerical input

How can I dynamically set the number of rows in a table based on an input field? var app = angular.module("myApp", []); app.controller("myCtrl", function($scope) { $scope.myObj =[ {"Name" : "Alfreds Futterkiste", "Country" : "Germany","City" : "Berlin ...

htmlangularjs

Applying Media Queries Based on Element Height

Situation: In my scenario, there is an image with two buttons below it, all of which share the same width. Issue: When the viewport is too wide horizontally, the buttons are not visible without scrolling down. This poses a challenge for tablets and small ...

javascriptjqueryhtmlcssmedia-queries

Resizing with Jquery results in sudden movement

I have used jQuery to create a set of buttons inside a <ul> element. I am now attempting to resize the <ul> by adding a handle to the top of it, but when I try to resize it, the element jumps as shown in the images below. What could be causing ...

jqueryhtmlcssjquery-ui

If element Div is labeled as either A, B, or C, it should smoothly fade out and then fade in as Div

I'm currently working on enhancing the navigation of my portfolio website and I’m facing a challenge in adding additional properties to my toggle() function. This basically involves creating a filter system with four possible options, which are: ...

jqueryhtmlcss

The animation loop completes and restarts from the initial keyframe

I have a CSS animation that I want to play through once and then stop at the final keyframe. However, currently it keeps returning to the initial keyframe and stopping there instead of reaching the end. The animation involves a title heading that gradually ...

csswordpresscss-animationselementorwebkit-animation

Template Function Problem Detected in AngularJS Formatting

I'm struggling to incorporate my scope attributes into a template function within my custom directive. The formatting for the return section in my template is not working as expected. This is how it currently looks: angular .module(' ...

htmlangularjs

Having trouble applying CSS while printing using the ngx-print library in Angular 14. Can anyone help me out with this issue

The table shown in the image is experiencing issues with applying CSS properties when printing. While the background graphics feature has been enabled, the preview section still does not reflect the CSS styling. What could be causing this discrepancy? Cli ...

htmlcssangular

Manipulating the DOM by linking to a div and using JSON information for opening and closing

I have retrieved data from a JSON file and displayed it as a link. I am looking to implement functionality that allows me to hide and show a div when the link is clicked. Below is the code I'm currently using: $(document).ready(function() { $ ...

jqueryhtmljsonhideshow

Display the user's chosen background image as the backdrop for my activity

As I've been exploring various corners of the internet, I've come across a potential technique for accessing the user's background from within my activity. I've brainstormed a couple of ideas (even though they might seem silly, just to ...

androidcssimagebackground

setting the width of <input> fields to automatically adjust

Curious about CSS. I was under the impression that setting width:auto for a display:block element would make it 'fill available space'. However, when applied to an <input> element, this doesn't seem to hold true. For instance: <b ...

css

In Internet Explorer 8, the functionalities of jquery animate() and slideUp() are not functioning properly

When it comes to animating the rows of a table using jQuery, I encountered an issue with IE8. While the animation works smoothly in FF, Safari, and Chrome, it fails to function in IE8 without showing any error messages for debugging purposes. To work arou ...

javascriptjqueryhtml

Strange spacing issues with inline-block elements and struggling to vertically center content within them

I feel like I'm losing my mind trying to figure this out... any help would be greatly appreciated. There are three divs on the page that need to sit on a single line. They must be square with rounded corners, so setting width and height is necessary ...

htmlcss

When attempting to change an image using JavaScript, the image fails to load

I am having trouble understanding what is wrong with my code. <html> <body> <script type="text/javascript"> function changeImage() { var image = document.getElementById('myImage'); if (image.src.match("bulbon")) { ...

javascriptjquerycsshtml

Items that do not commence from the start of the list

I'm encountering an issue with my unordered list where the li elements are not rendering properly. The first element seems to have a margin, and I'm unsure why this is happening. How can I fix this problem? function App() { return ( < ...

htmlcssreactjs

Obtain the precise X and Y coordinates of a <li> element regardless of where the mouse is clicked using Typescript

I'm stuck and could really use some assistance! Hey there, I have a simple question but I seem to be missing a crucial element. Here's my fiddle where I can detect the clicked item but that's as far as I've gotten: http://jsfiddle.ne ...

htmlcsstypescriptangular5event-delegation

Although the Flexbox is configured with 0 gap and margin, there remains a slight space between rows

I am currently attempting to utilize a flexbox in order to display several 600x300 images, however, I am encountering an unexpected small gap between the rows despite specifying a 0 gap and margin. Here is a screenshot for reference: .gallery { display: ...

htmlcss

Breaking content into two sections using Javascript or jQuery

Uncertain if Javascript can handle this task, any assistance or advice is appreciated. Consider this scenario: Suppose I have a 6-paragraph long content (text only) being pulled dynamically from the database all at once. This means that all 6 paragraphs a ...

javascriptjqueryhtml

Ways to eliminate excess space at the top of a page while utilizing float elements

After doing some research online, I've come across advice on how to remove the space at the top of a web page which usually involves setting the margin and padding of the body element to 0: body { margin: 0; padding: 0; } You can find more i ...

htmlcss

Extract following text using beautiful soup

I am attempting to extract the complete address from the given HTML code snippet. html_text = "" <div><h2 class="rounded">Address</h2><div class="textwidget"><p>30 Dov Hoz<br /> Kiryat Ono&l ...

pythonhtmlweb-scrapingbeautifulsoup

Looking for the optimal width ranges for media queries on laptops and cell phones?

Can anyone suggest the optimal width parameters to use in my code for different screen sizes, from tablets and laptops to cellphones, in order to create a responsive design? ...

htmlcssfixed-width