What's the best way to ensure images and videos in a div maintain their aspect ratio when resizing?

Is there a way to make the image and video fit inside the div without altering the aspect ratio?

The code snippet below is what gets displayed on my website, utilizing bootstrap for responsiveness.

        <div id="micropost-208">

          <div class ="jumbotron" style="background-color: #FFF; max-width: 100%; background-repeat:no-repeat;background-size:cover;background-position:center;border-top-left-radius:0px;border-top-right-radius:0px;">

            <div class="row paddingleft paddingright" style="padding-left:0;padding-right:0">

              <div class="col-md-12 wordwrap">

                <p><p style="text-align: center;"><strong>Hello everybody</strong></p><p>A topic that I discussed within 45 seconds . I want to tell you now about it . As it deserves more time . The topic was '' One individual can have a great impact on a group or community . Select one person, explain how this person has affected the others in the community .</p><p>My husband , the doctor who had to work for two years in a village far away near Turkey , had a great impact on the people living there . Those people didn't use to send the girls to school . Moreover by age 11-12 girls there should be prepared to get married . So you can imagine a wife , house wife and a mother at age eleven or twelve . But Safa , my husband ,succeeded to stop this phenomena . It took him time to convince people there to let the girls attending schools and continue studying at university . Safa was able to change that community .</p><blockquote> I don't forget that scene in 2003, while I was looking out of the window I saw many girls wearing their beautiful blue uniform with their school bags on their backs .</blockquote><p> So people there greatly affected by the doctor who lived with them for two years 2002- 2003 . At that time , People in this village started to buy satellites which was forbidden and they started to use technology and see the world inside their homes.</p><p><img src="http://pixabay.com/get/b084a9b1131ffb76a9da/1432159599/vulture-708783_1280.jpg"></p><p><br></p></p>
              </div>
            </div>
          </div>
        </div>

I do not have access to the content within the 

<div class="col-md-12 wordwrap">

I only have control over these specific div elements.

    <div id="micropost-208">

      <div class ="jumbotron" style="background-color: #FFF; max-width: 100%; background-repeat:no-repeat;background-size:cover;background-position:center;border-top-left-radius:0px;border-top-right-radius:0px;">

        <div class="row paddingleft paddingright" style="padding-left:0;padding-right:0">

          <div class="col-md-12 wordwrap">

I have attempted to apply max-width="100%" style and img-responsive class to all the above divs but it does not affect the img tag.

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

When using Twitter Bootstrap, you have the option to apply the img-responsive class to your images. For more information, visit http://getbootstrap.com/css/#images

<img src="image.jpg" class="img-responsive" />

Alternatively, you can achieve this with CSS by adding max-width: 100%;

<img src="image.jpg" style="max-width: 100%;" />

You can also specify it in your style sheet as suggested by Useless Code in the comments:

img {
    max-width: 100%;
}

If you do not define a height, the image will maintain its aspect ratio.

Using jQuery:

$(function () {
    $('img').addClass('img-responsive');
});

This script will add the class img-responsive to all images on the page.

Answer №2

Give this a shot: 

#post-589 .col-md-6 img {max-width: 50%;}

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

Exploring the functionalities of Node Express 3x with socket IO through testing

I attempted to integrate socket IO into my project, but unfortunately, I couldn't get it to work properly. This is my app.js: /** * Module dependencies. */ var express = require('express'); var routes = require('./routes'); va ...

javascriptnode.jsexpresssocket.io

What steps should be taken to make mocha utilize the HTTP response?

Every time I make an http call, the function it returns causes my comparison to fail because [Function] is never equal to the value I want. Is there a way to make my assert statement consider the true/false flag within it? # test/helloWorld.js const othe ...

javascriptnode.jsmocha.jschai

Using html and the javascript library 'turn.js' to make an interactive flipbook

I'm trying to use the turn.js library to create a flipbook. Here is the code I have been using, but it doesn't seem to be working correctly for me. It currently works fine on jsfiddle and you can see it here [text]http://jsfiddle.net/xd7sh59p/ W ...

javascripthtmlturn.js

Using Node.js, you can leverage regular expressions to swap out the data within parentheses in a sub

I'm looking for a way to update the table name inside a subquery using regex in node.js. For instance, transforming the given query: SELECT col1 FROM (SELECT col1::DECIMAL(10), col2, FROM @table_name) WHERE (COND1) AND (COND2) Into: SELECT col1 FROM ...

javascriptnode.jsregex

Adding dynamic values to nested form groups in Angular Form Array

After following a tutorial on creating a reactive form in an Angular application, I managed to implement it successfully. However, I encountered an issue when trying to add an additional control called "setNumber" to the form array. I want this control to ...

javascriptangulartypescriptformsangular-reactive-forms

What is the significance of a colon appearing at the start of HTML attribute names in a Vue template?

<circle r="3" :cx="airport.x" :cy="airport.y" class="airport__marker" /> Are the attributes v-bind:cx and v-bind:cy equivalent to what is shown above? ...

htmlvue.jssyntax

Tips for determining the total number of search results for a specific keyword on Google

I am looking to input a specific keyword such as "blue metal kettle" (with or without quotations) and retrieve the exact number of search results that are found. When I conduct a search without using quotes, the current result is: Results 1 - 10 of about ...

htmlscreen-scrapingtext-extractiongoogle-search-api

Nesting placeholders is not permitted in i18n

I am attempting to implement Interpolation with Vue3 and vue-i18n version 9.3. However, when I try to pass arguments, I encounter the following error: Message compilation error: Not allowed nest placeholder 1 | Showing {{from}} to {{to}} of {{total}} ent ...

javascriptvue.jsvue-i18n

When I click on any input field, button, or other controls on a webpage, the page automatically zoom

I am currently trying to troubleshoot an issue with a bootstrap theme. It seems to be working perfectly on all browsers except for ios safari browsers. Whenever I click on an input field or button, the page suddenly zooms in. It's quite frustrating. ...

htmlioscsstwitter-bootstrapviewport

Can child elements' visibility be controlled by their parent's class using only CSS?

Is it possible to achieve this functionality using only CSS: When the parent element has a "hidden" class, its child elements with an "a" class should be hidden For example: <div class="parent"> <div class="a"></div> // Visible ...

cssvisibility

Include some extra margin or padding to ensure the section is visible below the fixed navbar

I have implemented smooth scrolling using scroll-behavior: smooth in my CSS. The navigation bar is sticky, and when I click on a menu item, it takes me to the designated section. The issue I am facing is that the section goes under the sticky navbar. I wo ...

htmlcssbootstrap-4

Why is my MySQL query not returning the most recent results when using setInterval()?

I am currently facing an issue with the setInterval function within the $(document).ready(function(){} My approach involves using setInterval to call a PHP script that executes MySQL queries to check the status of 4 switches and then updating the screen w ...

phpjavascriptmysql

Trouble with navigating through the WordPress blog menu

Having trouble opening my blog menu item on my website. My "Blog" category is a top-level menu item, but when I click on it, the menu only opens on right click - "Open in new window". The site in question is . All other menu items work fine, except for th ...

phpjquerywordpressdrop-down-menublogs

Variances in errors observed while accessing a website on ports 80 and 5500

I've been developing a chatbot system, and I'm encountering an issue where I receive an error message every time I send a message and expect a response back. What's puzzling is that the error message varies depending on whether I run the si ...

javascriptdjangoajaxlocalhosthosting

What is the best way to bind the value of total when working with forms and the bind method?

I am working on a form where I need to pass the value of total. Regarding the total: I have successfully passed the value of the cart, which is an array. const [total, setTotal] = useState<number | undefined>(undefined); const calculateTotal = () ...

javascriptreactjstypescriptformsnext.js

A collection of jQuery objects that consist of various DOM elements as their properties

Seeking a more concise and potentially more streamlined approach using jQuery. I have an object called lbl which represents a div. Inside this div, there is a span tag that contains the properties firstName and lastName of the lbl object. Here's how t ...

javascriptjquerycssdom

There seems to be a problem with the full calendar updateEvent feature as it is unable to read the property 'clone'

Struggling to update an event using FullCalendar and a modal. Encounter the 'cannot read property 'clone' of undefined' error when attempting to update. Following the documentation, I utilize the clientEvents method. It is crucial t ...

javascriptjqueryfullcalendar

Here is a guide on integrating bower dependencies with ASP.NET Core

I am facing an issue: I do not want to use: and within a View. Therefore, I decided to download jQuery-UI from the 'Manage Packages Bower', but it is not functioning correctly. The console is displaying an error message: '$ is undefine ...

jqueryasp.netjquery-uiasp.net-coredependencies

Navigating the issue of "Experiencing additional hooks rendered compared to the previous render"

I'm currently in the process of developing a small application where certain elements will be nested within one another. My approach involves segmenting each component into its own file (children), returning a function with two components in each Rend ...

javascriptreactjsreact-native

Customizing tooltips in SharePoint 2013 for enhanced user experience

I am working with a list that consists of various fields. When hovering over a field, the label name and validated field name are currently displayed. I would like to show a new message explaining what should be filled in that particular field. Additiona ...

javascriptcsssharepointtooltip