Size of the images

Good morning guys, I have some issues to size the images of the code below,specifically for the ‘Carousel2’. I can manage the height BUT I can’t manage the widht…very strange. Any help to work with size of the photo…Thanks guys!!

import dash
import dash_bootstrap_components as dbc
from dash import dcc
from dash import html
from dash.dependencies import Input, Output
from dash import dash,html
import dash_bootstrap_components as dbc
from dash import dcc
import docx

app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])

def read_word_file(filepath):
    doc = docx.Document(filepath)
    full_text = []
    for para in doc.paragraphs:
        full_text.append(para.text)
    return '\n'.join(full_text)

#file paths

filepath = 'C:/Users/Workstation2/Desktop/Sitochiara/chisono.docx'

file_text = read_word_file(filepath)

def read_word_file(filepath1):
    doc = docx.Document(filepath1)
    full_text = []
    for para in doc.paragraphs:
        full_text.append(para.text)
    return '\n'.join(full_text)

filepath1 = 'C:/Users/Workstation2/Desktop/Sitochiara/psicoforense.docx'

file_text1 = read_word_file(filepath1)

#CONTACT US

contact_us = html.Div(
    [
              html.Div(
            [
                html.Span(className="fa fa-phone fa-lg"),
                html.Span("Phone: (+39) 388-1181074"),
            ],
            style={"margin-right": "20px"},
        ),
        html.Div(
            [
                html.Span(className="fa fa-map-marker fa-lg"),
                html.Span("Indirizzo: Via Lorenzo il Magnifico 110, Roma, 00162"),
            ],
            style={"margin-right": "20px"},
        ),
        html.Div(
            [
                html.Span(className="fa fa-envelope fa-lg"),
                html.Span("Email: info@chiarapaolapapi.it"),
            ],
        ),
    ]


#FOOTER

footer = html.Div([
    html.Footer(className="text-center text-white ",
                style={"background-color": "#21081a"},
                children=[
                    html.Div(className="container p-4"),
                    html.Div(className="text-center p-3",
                             style={"background-color": "rgba(0, 0, 0, 0.2)"},
                             children=[
                                 "© 2023 Copyright: ",
                                 html.A("Carlo Longo",
                                       # href="https://mdbootstrap.com/",
                                        className="text-white")
                             ])
                ])
])

#definition carousel1

carousel = dbc.Carousel(
    items=[
        {"key": "1", "src": "/assets/roma3.jpg","img_style":{"max-height":"750px"}},
        {"key": "2", "src": "/assets/terapia.jpg","img_style":{"max-height":"750px"}},
        {"key": "3", "src": "/assets/bilancino.jpg","img_style":{"max-height":"750px"}}
    ],
    controls=True,
    indicators=True,
    interval=2000,
    ride="carousel"
)


#definition carousel2


carousel2 = html.Div(
    [
        dbc.Carousel(
            id="carousel",
            items=[
                {"key": "1", "src": "/assets/roma.jpg","img_style":{"width":"50px","height":"750px" }},
                {"key": "2", "src": "/assets/stanza.jpeg","img_style":{"width":"50px","height":"850px"}},

            ],
            controls=True,
            indicators=True,
            interval=2000,
            ride="carousel",
        ),

    ]
)


#NAVIGATION BAR

navbar2 = dbc.NavbarSimple(
        children=[
                dbc.NavItem(dbc.NavLink("Chi sono", href="#start",external_link=True)),
                dbc.NavItem(dbc.NavLink("Contatti",href="#mid",external_link=True)),
                dbc.NavItem(dbc.NavLink("Dove Ricevo", href="#midstart",external_link=True)),
                dbc.NavItem(dbc.NavLink("Articoli", href="#midstart", external_link=True)),
                dbc.NavItem(dbc.NavLink("Servizi", href="#midend", external_link=True)),
                dbc.NavItem(dbc.NavLink("Consulenze Gestite", href="#end",external_link=True))],


    brand="Dott.ssa Chiara Paola Papi",
    brand_href="#",
    color="black",
    sticky='top',
    dark=True,

)



CONTENT_STYLE = {
   "margin-left": "3rem",
   "margin-right": "2rem",
   "padding": "2rem 1rem",
}



content = html.Div(
            html.Div([html.H1("La Psicologia Giuridica e Forense", id="start")] +
                                  [html.Br()] +
                                  [html.P(id='markdown', children=(file_text1))]+
                                  [html.H1("Chi Sono", id="midstart")] +
                                  [html.P(id='markdown1', children=(file_text1))]+
                                   [carousel2] +
                                  [html.H1("Chi Sono", id="mid")] +
                                  [html.P(id='markdown2', children=(file_text))]+
                                  [html.Br()] +
                                  [html.H1("Servizi", id="midend")]+
                                  [html.P(dcc.Markdown('''
                                            * Consulenza Minori e Famiglia
                                            * Risarcimento del danno alla persona:
                                            * Danno da lutto
                                            * Danno da nascita indesiderata
                                            * Danno da wrongful life
                                            * Danno da menomazione fisica
                                            * Danno alla sfera sessuale
                                            * Danno da menomazione della capacità visiva
                                            * Danno estetico
                                            * Danno da mobbing
                                            * Danno da stalking
                                            * Danno da colpa professionale  
                                            * Danno da gaslhiting
                                            * Danno dei congiunti
                                            * Danno da carcerazione ingiusta
                                            * Danno da handicap
                                            * Idoneità per la ratificazione di attribuzione di sesso
                                            * Consulenza Mobbing e demansionamento
                                            * Valutazione dell'ammissibilità  o meno di una amministrazione di sostegno
                                            * Invalidità Civile
                                            * Capacità Testamentale
                                            * Capacità di intendere e volere
                                            * Valutazione per Patente di guida e porto d'armi
                                            * Pericolosità Sociale
                                            * Violenza di genere
                                            '''))]+
                                  [html.H1("Contatti", id="end")]+
                                  [html.P(id='markdown3', children=(contact_us))]

                                     ),

    id="page-content", style=CONTENT_STYLE)


app.layout = html.Div([navbar2, carousel,content,footer])


if __name__ == '__main__':
    app.run_server(debug=True)

Hi @Cocco

There is a default imgClassName set to “w-100” which makes the image responsive. If you want to stretch the image to a fixed width and height manually, then try setting imgClassName to “”
For example:

items=[
                {"key": "1", "src": "/assets/roma.jpg","img_style":{"width":"50px","height":"750px" }, "imgClassName": ""},
                {"key": "2", "src": "/assets/stanza.jpeg","img_style":{"width":"50px","height":"850px"}, "imgClassName": ""},

            ],

Thanks @AnnMarieW . It now works nicely. Have a good day, Carlo

1 Like